DropdownList using template: displaying image based on property of the items

2 posts, 0 answers
  1. Sohel
    Sohel avatar
    4 posts
    Member since:
    Dec 2008

    Posted 26 Jul Link to this post

     Lets say i have a kendo dropdown like the following.
     
     var data = [
                            {text: "Item1", value:"1", type: "User"},
                            {text: "Item2", value:"2", type: "User"},
                            {text: "Item3", value:"3", type: "Group"}
                        ];

                        $("#dropdownlist").kendoDropDownList({
                            dataTextField: "text",
                            dataValueField: "value",
                            dataSource: data
                        });

    Now, I would like to load glyphicon based on the type of the each item. In other words, glyphicon1 if item is of type  "user" and  glyphicon2 if item is of type "Group"

    I know i can use the "template" to load icons with the items in the dropdown but how can i do it conditionally based on a property of the items?
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 28 Jul Link to this post

    Hi Sohel,

    You can use the DropDownList template option, and conditionally add custom classes (or HTML elements with custom classes), based on the value of some model property, e.g.:

    http://dojo.telerik.com/uwumO

    Further detailed information about Kendo UI Templates, and multiple code snippets, illustrating it, are available in the following section of our documentation:

    http://docs.telerik.com/kendo-ui/framework/templates/overview

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
Back to Top