Introduction

This article explains how to bind images with text in a dropdownlist from your table.

Requirement

Code.aspx

I have used a DropdownList control to bind data from the table "ddl_image". Before doing the design you need the files "ddl.css", "jquery-1.6.1.min.js" and "jquery.dd.js". You can download them from here.

Add the following code in the aspx page:

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head id="Head1" runat="server">
  3. <title>Dropdownlist with Images</title>
  4. <link rel="stylesheet" type="text/css" href="dropdown/ddl.css" />
  5. <script type="text/javascript" src="dropdown/js/jquery-1.6.1.min.js"></script>
  6. <script type="text/javascript" src="dropdown/js/jquery.dd.js"></script>
  7. <!-- Script is used to call the jQuery for dropdown -->
  8. <script type="text/javascript" language="javascript">
  9. $(document).ready(function (e) {
  10. try {
  11. $("#ddlprofile").msDropDown();
  12. } catch (e) {
  13. alert(e.message);
  14. }
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <form id="form1" runat="server">
  20. <table>
  21. <tr>
  22. <td align="right">
  23. <b>Profile:</b>
  24. </td>
  25. <td>
  26. <asp:DropDownList ID="ddlprofile" runat="server" Width="150px" onselectedindexchanged="ddlCountry_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
  27. </td>
  28. </tr>
  29. </table>
  30. </form>
  31. </body>
  32. </html>

Code.cs

Here I tried to addd a dropdownlist first, then bind the titles and then call both functions on pageload as in the following.

1. Bind dropdownlist

  1. protected void Bindddl()
  2. {
  3. SqlConnection con = new SqlConnection("Data Source=nehashama;Initial Catalog=rp;Integrated Security=true");
  4. con.Open();
  5. SqlCommand cmd = new SqlCommand("select * from ddl_image", con);
  6. SqlDataAdapter adp = new SqlDataAdapter(cmd);
  7. DataSet ds = new DataSet();
  8. adp.Fill(ds);
  9. ddlprofile.DataTextField = "Name";
  10. ddlprofile.DataValueField = "Profile_image";
  11. ddlprofile.DataSource = ds;
  12. ddlprofile.DataBind();
  13. con.Close();
  14. }

2. Bind Title

  1. protected void BindTitle()
  2. {
  3. if (ddlprofile != null)
  4. {
  5. foreach (ListItem li in ddlprofile.Items)
  6. {
  7. li.Attributes["title"] = "ddl/" + li.Value; // it ll set the value of items in dropdownlist as tooltip
  8. }
  9. }
  10. }

3. Call on Page Load

  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. if (!IsPostBack)
  4. {
  5. Bindddl();
  6. BindTitle();
  7. }
  8. }

Now save all and view the page in a browser, it will work fine and will look as in the following image:

DropDownList3.jpg