CODEWITHSUNDEEP
jquerycsskendo-uitreeviewkendo-treeview
Janaka Sampath
Janaka Sampath

Reputation: 85

how to add Custom CSS for Kendo Tree View nodes?

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

Upvotes: 4

Views: 4154

Answers (2)

Slipping Jimmy
Slipping Jimmy

Reputation: 21

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.

Upvotes: 1

Janaka Sampath
Janaka Sampath

Reputation: 85

To apply CSS class dynamically to the kendo tree view nodes I have found solution using jquery. Inside the data source we can define level of the Node and according to the level we can add CSS class inside the Kendo tree view Data bound event.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/treeview/dragdrop">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.flat.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
        <div id="example">
            <div class="demo-section k-content">
                <h4>Treeview One</h4>
                <div id="treeview-left"></div>
                <h4 style="padding-top: 2em;">Treeview Two</h4>
                <div id="treeview-right"></div>
            </div>

            <script>
                

                $("#treeview-right").kendoTreeView({
                    dragAndDrop: true,
                    dataSource: [
                        { text: "Storage", Level: "first", expanded: true, items: [
                            { text: "Wall Shelving",Level: "second",items:[{text:"hi",Level: "third",}] },
                            { text: "Floor Shelving",Level: "second" },
                            { text: "Kids Storage",Level: "second" }
                        ]
                        },
                        { text: "Lights",Level: "first", items: [
                            { text: "Ceiling",Level: "second" },
                            { text: "Table",Level: "second" },
                            { text: "Floor",Level: "second" }
                        ]
                        },{ text: "fight",Level: "first", items: [
                            { text: "Ceiling",Level: "second" },
                            { text: "Table",Level: "second" },
                            { text: "Floor",Level: "second" }
                        ]
                        }
                    ],
                   dataBound:function(e){
                    
                     var treeview = $("#treeview-right").data("kendoTreeView");
                     $('#treeview-right ul li').each(function(i)
                      {
                       debugger;
                       	var dataItem = treeview.dataItem(this);
                       if(dataItem.Level == "first"){
                         $(this).addClass("first");
                       }
                       if(dataItem.Level == "second"){
                         $(this).addClass("second");
                       }
                       if(dataItem.Level == "third"){
                         $(this).addClass("third");
                       }

                      });
                     

                   }
                 
                });
            </script>

            <style>
                #treeview-left,
                #treeview-right
                {
                    overflow: visible;
                }
              .first{ color:red }
              .second{ color:green }
              .third{ color:blue }
            </style>
        </div>


</body>
</html>

Upvotes: 1

Related Questions