This is a migrated thread and some comments may be shown as answers.

How to display items containing Html

2 Answers 169 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Courouble Damien
Top achievements
Rank 1
Courouble Damien asked on 06 Aug 2012, 01:07 PM
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


2 Answers, 1 is accepted

Sort by
0
Accepted
John DeVight
Top achievements
Rank 1
answered on 07 Aug 2012, 01:15 PM
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
0
Courouble Damien
Top achievements
Rank 1
answered on 13 Aug 2012, 12:16 PM
Sorry for the late reply, 

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

Tags
DropDownList
Asked by
Courouble Damien
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
Courouble Damien
Top achievements
Rank 1
Share this question
or