In this article I will show you how you can display image
into dropdownlist or select list option in asp.net using c#.net . This article
will display the select list option item with image.
Some of my previous articles are as follows: Display DropdownList Item By
Group in Asp.Net MVC Using C#.Net, Load Partial View By Selecting
Value in Dropdown Using C# in Asp.net MVC, jQuery DatePicker Calendar
With Dropdown Month and Year in Asp.Net, Bind DropDownList Using Entity
Framework in ASP.Net MVC Using C#, DropDownList Bind By Using
XmlDataSource in Asp.Net, Bind DropDownList In MVC
WebGrid and Retrive Value Using Asp.net MVC, C#.Net.
So for this article first we will create a new asp.net application and add dropdown list into you page. After adding dropdownlist your .aspx page code will look as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ddlitemwithicon.aspx.cs"
Inherits="ProjectDemo_Asp.et.ddlitemwithicon" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DropdownList
Item With Custom Icon Images In Asp.net Using C#.Net</title>
<style>
.ddlstyle
{
width: 200px;
}
option
{
padding-left:
20px;
font-size:
12px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server" Width="200px">
</asp:DropDownList>
</div>
</form>
</body>
</html>
|
In above code I have used a style sheet to provide padding
or space between the text and the image which going to display with option.
Now let’s check the code for binding and displaying the options
in dropdown.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace ProjectDemo_Asp.et
{
public partial class ddlitemwithicon : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
// if
(!IsPostBack)
{
DataTable
objdt = new DataTable();
objdt = GetDataForChart();
DropDownList1.DataSource =
objdt;
DropDownList1.DataTextField =
"Country";
DropDownList1.DataValueField
= "Id";
DropDownList1.DataBind();
//Now
add class to each and every item in dropdown
//Now,
add a "SysCode" attribute to each item in the dropdown list
string
imageURL = "";
for
(int i = 0; i < DropDownList1.Items.Count;
i++)
{
switch
(DropDownList1.Items[i].Text)
{
case "India":
imageURL = "Images/flag-of-India.png";
break;
case "Kuwait":
imageURL = "Images/flag-of-Kuwait.png";
break;
case "Egypt":
imageURL = "Images/flag-of-Egypt.png";
break;
case "Bangladesh":
imageURL = "Images/flag-of-Bangladesh.png";
break;
case "Afghanistan":
imageURL = "Images/flag-of-Afghanistan.png";
break;
}
ListItem
item = DropDownList1.Items[i];
item.Attributes["style"] = "background:
url(" + imageURL + ");background-repeat:no-repeat;";
}
}
}
/// This method will provide data
/// In this methos you can fatch data from DB and pass it to
chart control
///
public
DataTable GetDataForChart()
{
DataTable
_objdt = new DataTable();
_objdt.Columns.Add("Country", typeof(string));
_objdt.Columns.Add("Id", typeof(long));
_objdt.Columns.Add("LabelValue");
var
_objrow = _objdt.NewRow();
_objrow["Country"]
= "India";
_objrow["Id"]
= 1;
_objdt.Rows.Add(_objrow);
_objrow = _objdt.NewRow();
_objrow["Country"]
= "Kuwait";
_objrow["Id"]
= 2;
_objdt.Rows.Add(_objrow);
_objrow = _objdt.NewRow();
_objrow["Country"]
= "Egypt";
_objrow["Id"]
= 3;
_objdt.Rows.Add(_objrow);
_objrow = _objdt.NewRow();
_objrow["Country"]
= "Bangladesh";
_objrow["Id"]
= 4;
_objdt.Rows.Add(_objrow);
_objrow = _objdt.NewRow();
_objrow["Country"]
= "Afghanistan";
_objrow["Id"]
= 5;
_objdt.Rows.Add(_objrow);
return
_objdt;
}
}
}
|
Here in above code I have prepared static data into
datatable. You can use db table data to display the records.
Now just check the page load section. In this first I have
bind the dropdown list item and then on the bases of text I have selected image
and pass it to list item to display. Now I have added attribute to display
image with option in dropdown list.
Now we have done just check the output.
About the Author
not working in chrome browser
ReplyDeletedid you found any solution for this ?
DeleteNot working on edge either
ReplyDeletedid you found any solution for this ?
Deletefk u not working chrome ie opera
DeleteControl your vocabulary
DeleteThis comment has been removed by the author.
ReplyDeleteDear Sir,
ReplyDeleteNot working in google chrome ,IE and Opera
kindly fix this issue .. i tried lot but not getting through. My email id :sandipshaw7@gmail.com.