0

In code behind I am creating a Control : a dropdownlist with inside some pictures.

DropDownList ddlEventIcone = new DropDownList();
ddlEventIcone.ID = "eventIconeDDL";
ddlEventIcone.Width = Unit.Pixel(110);

Then I want to put picutures inside, so I get them from a map created like so :

Dictionary<string, Image> iconeMapping = new Dictionary<string, Image>();
iconeMapping .Add(iconeName, myImage);

I put them in a ListItem which I'll bind to the dropdownlist:

foreach (Image image in iconeMapping.Values.ToArray())
{
    lImageddl.Add(image.ImageUrl.Replace("~", "../.."));// the tild wasn't working
}

I bind my list with the dropdownList :

ddlEventIcone .DataSource = lImageddl;
ddlEventIcone .DataBind();

I use Javascript to precise the 'type' of the element as Img:

foreach (ListItem listItem in ddlEventIcone.Items.Cast<ListItem>())
{
   listItem.Attributes.Add("class", "imageconverter");
 }

With the Javascript :

  $(function () {
            $(".imageconverter").each(function () {
                $(this).html('<img src="' + $(this).text() + '">');
            });
        });

The Result is a dropdownlist with 'empty' options, nothing is shown (blank rows) BUT in the source page here is what I've got :

<select name="DigitalCalendarGrid$ctl09$eventIconeDDL" id="DigitalCalendarGrid_ctl09_eventIconeDDL" style="width:110px;">
        <option value="../../images/Event/cycling.png" class="imageconverter" width="10" height="10"><img src="../../images/Event/cycling.png"></option>
        <option value="../../images/Event/football.png" class="imageconverter" width="10" height="10"><img src="../../images/Event/football.png"></option>
    </select>

EDIT Precision : in the Chrome DevTools when I pass the mouse on the picture path it shows the picture but it says 

0x0 pixels (Natural 256x256 pixels)
Benoît
  • 143
  • 1
  • 2
  • 15
  • possible duplicate -> https://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list – daddygames Jul 05 '18 at 12:51
  • As rfar as i know, you cant use image tag inside a select option. Its better to use some javascript library like: http://designwithpc.com/Plugins/ddSlick , http://jqueryui.com/selectmenu/#custom_render , https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/ – GiampaoloGabba Jul 05 '18 at 12:52
  • Seems like it is not possible unless using external librairy... Too bad.... – Benoît Jul 05 '18 at 16:00

0 Answers0