Kendo TreeView remote data with icons

Question

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?

Answer 1

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>