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?
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>