How to display items containing Html

[Courouble Damien]

Hi everyone,

I'm trying to display items containing html inside a dropdown.

So as an example let's imagine I got some items like :

var tMyItems = [{ value : "0", template: "<div class='myclass'><p>Item 1</p></div>"  },
{ value : "1", template: "<div class='myclass'><p>Item 2</p></div>"  }]

Im binding them to a dropdown using

 $("#LayoutDDL").kendoDropDownList({
        dataSource: tMyItems  
        dataTextField: "template",
        dataValueField: "value"
 });

And I would like to see each item content interpreted as html (no markups, css applied ..) So far I'm seeing the item itself but the html is not interpreted.

Is there anyways to handle that with the dropdown ?

Thanks,

Damien

[John DeVight]

Hi Damien,

The only way I could get this to work was to alter the list of items after the dropdownlist is created.  I also had to add another property to each json object for the text to be displayed as the selected item.

When a dropdownlist is created, it creates a div with an id of dropdownlist + "-list".  After the dropdownlist is created, the list items can be altered.

Here is the code:

var tMyItems = [

    { value : "0", template: "<div class='myclass'><p>Item 1</p></div>", text: "Item 1"  },

    { value : "1", template: "<div class='myclass'><p>Item 2</p></div>", text: "Item 2"  }];

  

var dropdown = $("#LayoutDDL").kendoDropDownList({

    dataSource: tMyItems,

    dataTextField: "text",

    dataValueField: "value"

}).data("kendoDropDownList");

  

$.each($("#LayoutDDL-list li"), function(idx, li) {

    $(li).html(tMyItems[idx].template);

});

Hope this helps.

Regards,

John DeVight

[Courouble Damien]

Sorry for the late reply, 

Thank you so much John it's working like a charm !!