Dynamically load dropdown with text and attach image with text in dropdown list item in c#.net

Question

I am fetching datasource from database and adding it into a dropdown list, but with text i want to add an image in list item. i have tried following code

  DataTable dt = ds.Tables[0];

                for (int count = 0; count < dt.Rows.Count; count++)
                {
                    String status;

                    if (dt.Rows[count]["status"].ToString() == "True")
                    {
                        status = "<img src='online.jpg'/>";

                    }
                    else
                    {
                         status = "<img src='online.jpg'/>";

                    }
                    dt.Rows[count]["SubCampaignName"] = dt.Rows[count]["SubCampaignName"] + " -    " + status;
                }

                SkillsStatusddl.DataSource = dt;
                SkillsStatusddl.DataTextField = "SubCampaignName";
                SkillsStatusddl.DataValueField = "SubCampaignId";
                SkillsStatusddl.CssClass = "";
                SkillsStatusddl.DataBind();

But instead of attaching image, it is printing "" in dropdown list item

As a side note: you should consider using foreach to loop through IEnumerable objects. — Arthur Rey
– Arthur Rey, Commented Jan 8, 2016 at 13:34

Community · Accepted Answer · 2017-05-23 12:24:14Z

4

My Solution

I think use to plugin but fast and all browser supports and good community. I Using bootstrap css,js and Bootstrapt Select Plugin - https://silviomoreto.github.io/bootstrap-select/examples/

My Sample Code

Back-END Code :

    ListItem list = new ListItem();
    list.Value="1";
    list.Text="1";
    list.Attributes.Add("data-icon", "glyphicon-heart");
    ddlTest.Items.Add(list);

Front-End

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="ddlTest" CssClass="selectpicker" runat="server"></asp:DropDownList>



        </div>
    </form>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="  https://silviomoreto.github.io/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

You add the custom icon this link : https://icomoon.io/app/#/select

My opinion is the best solution is this.

I hope can help.

Drop-Down List Filled with Images in ASP.NET?

Reference link : ASP-DropDownList CodeBehind images

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jan 8, 2016 at 8:40

rootturk

3264 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

himesh Over a year ago

These links have solutions that are working in firefox only, that is depressing

rootturk Over a year ago

@SonerGönül I Suggest fast solve to problem, thank you note.

himesh Over a year ago

It worked but in firefox only, why in google chrome it is not working?

rootturk Over a year ago

@himesh I'm edit my message please look :stackoverflow.com/posts/34672698/revisions Bootstrap Select Plugin for support all modern browsers. (chrome, opera, firefox, IE8+)

himesh Over a year ago

Thanks, now i am getting the heart icons in list, but now the problem is that i want to use unchecked-radio icon which is freely availble so i replaced your code list.Attributes.Add("data-icon", "glyphicon-heart"); with list.Attributes.Add("data-icon", "glyphicon-unchecked-radio"); which is not working, i also tried list.Attributes.Add("data-icon", "unchecked-radio"); but not good luck

|

Collectives™ on Stack Overflow

Dynamically load dropdown with text and attach image with text in dropdown list item in c#.net

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related