kendo-uikendo-gridkendo-treeview

Kendo TreeView remote data with icons


I had a Kendo TreeView that fetch data from the database, basically it look like this demo. And I wanted to add icon in front of the text using this Kendo icons. Any idea how can I do this? Or it can be done with the CSS?


Solution

  • Just follow the example in Telerik website that explains the templates.

    https://demos.telerik.com/kendo-ui/treeview/templates

    Add a template script to your html

    <script id="treeview-template" type="text/kendo-ui-template">
                #: item.text #
                # if (!item.items) { #
                    <a class='k-icon k-i-close-outline' href='\#'></a>
                # } #
            </script>
    

    Add to your tree view definition

    $("#treeview").kendoTreeView({
                    template: kendo.template($("#treeview-template").html()),
    

    And it´s done.

    Edit for the conditional coloring

    <script id="treeview-template" type="text/kendo-ui-template">
    
         # if(item.active=='n') { #
                <span style='color:red'> <a class='k-icon k-i-close-outline' ></a> #: item.group != null ? item.group : item.ledger #</span>
         # } else { #
                    <span><a class='k-icon k-i-check-outline'></a>  #: item.group != null ? item.group : item.ledger #</span>
         # } # 
    
    
      </script>