how to add Custom CSS for Kendo Tree View nodes?

user_6088246 0
Viewed 3475

i'm using kendo tree view with my own data source. from there i want to add custom css class for some nodes.

Let's say I want to add a red background to some tree nodes, in a dynamically loaded Kendo UI TreeView. How can I do this?

My expectation sample image is given below

kendo-treeview kendo-ui treeview css jquery
2 Answers

Today I solved this for myself using kendo templates. The code snippet below is simple, but if you want to include JavaScript logic in your rendering, then see Telerik's demo: https://demos.telerik.com/kendo-ui/treeview/templates.

My JavaScript data looks like:

[
    { title: 'Label', extraClasses: 'st-assembly' }
]

I initialize my treeview as follows:

 $('#structure-tree').kendoTreeView({
    dataSource: PrimaryStructure,
    dataTextField: 'title',
    template: '<span class="#: item.extraClasses #">#: item.title #</span>',
    select: onKendoTreeViewSelect,
    dragAndDrop: true,
 });

Before the template, the treeview element is rendered as:

<span class="k-in">Label</span>

Now the element is rendered as:

<span class="k-in"><span class="st-assembly">Label</span></span>

Hope this helps.

user_78978560
Related