how can we add background image to dropdownlist in asp.net with autopostback=true

Question

i have dropdownlist with autopostback=true. i want to add background image to the dropdownlist and change the background colour of selecteditem and change colour of scrollbar. plese help me....

sujit jha · Answer

merlish sorry but you cant add background image. first upon you have create a table in database id, contenttype and image supose. then you have retrive image from dropdownlist for ex... DropdownList Item With Custom Icon Images In Asp.net Using C#.Net .ddlstyle { width: 200px; } option { padding-left: 20px; font-size: 12px; } for code.. cs 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; } } ok use this code this code is 100% working. thank you

sujit jha · Answer

merlish sorry but you cant add background image. first upon you have create a table in database id, contenttype and image supose. then you have retrive image from dropdownlist for ex... DropdownList Item With Custom Icon Images In Asp.net Using C#.Net .ddlstyle { width: 200px; } option { padding-left: 20px; font-size: 12px; } for code.. cs 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; } } ok use this code this code is 100% working. thank you

merlish · Answer

plese give reply....very urgent

merlish · Answer

please help me.............

merlish · Answer

when we set autopostback=true and dropdownlist selectedindexchange property will not work in this jquery. plese check it

Satyapriya Nayak · Answer

Hi Merlish, Please refer the below link http://www.misfitgeek.com/2011/04/jquery-styled-dropdownlist/ Thanks