How to display items containing Html

3 posts, 1 answers
  1. Courouble Damien
    Courouble Damien avatar
    54 posts
    Member since:
    Aug 2009

    Posted 06 Aug 2012 Link to this post

    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. Answer
    John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 07 Aug 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Courouble Damien
    Courouble Damien avatar
    54 posts
    Member since:
    Aug 2009

    Posted 13 Aug 2012 Link to this post

    Sorry for the late reply, 

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

Back to Top