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