Kendo Treeview - Add class to treeItem <li> element in kendo treeView

Question

I am trying to distinguish between a folder and a leaf in kendo treeView, so I will do different css classes for each type.

<li role="treeitem" class="k-item k-first blalala" data-uid="1111"data-expanded="true">

I want to add the "blalala" class only to leaf nodes. I tried doing something in the dataBound function, but I don't know how to distinguish it in the jquery / htmlElement. The following code adding this class to all elements with class "k-item"

        const treeViewOptions: kendo.ui.TreeViewOptions = {
        dataBound: (e: kendo.ui.TreeViewDataBoundEvent): void => {

            const treeItem = $('.k-item:not(:has(.k-item))');
            if (treeItem) {
                treeItem.addClass("blalala");
            }

        },}

I found an example of a tree so you can try to help me: example

Answer 1

Per my vue.js project, I just added styles based on the generated DOM hierarchy

<style>
/* root item class */
div > ul > li > div > span.k-in {
  color: black !important;
  font-weight: 600;
  font-size: 105%;
}
/* level 2 child item class */
div > ul > li > ul > li > div > span.k-in  {
  color: #284d8e !important;
  font-weight: 500;
  font-size: 100%;
}
/* level 3 child item class */
div > ul > li > ul > li > ul > li > div > span.k-in  {
  color: black !important;
  font-weight: 400;
  font-size: 100%;
} 
</style>

Answer 2

In such case we can handle the dataBound event separately for the root items and for the child items and add the custom class by using findByUid method depending on the hasChildren property. Here is a dojo and the code that I used:

 <div class="demo-section k-content">
            <h4>Inline data (default settings)</h4>
            <div id="treeview-left"></div>
        </div>

        <script>
            var inlineDefault = new kendo.data.HierarchicalDataSource({
                data: [
                    { text: "Furniture", items: [
                        { text: "Tables & Chairs" },
                        { text: "Sofas" },
                        { text: "Occasional Furniture" }
                    ] },
                    { text: "Decor", items: [
                        { text: "Bed Linen" },
                        { text: "Curtains & Blinds" },
                        { text: "Carpets" }
                    ] }
                ]
            });

            var addClass = function (treeview, items){

                for (var i = 0; i < items.length; i++) {
                                            if(!items[i].hasChildren){
                        treeview.findByUid(items[i].uid).addClass('blalalala')
                    }
                            }
            }

            $("#treeview-left").kendoTreeView({
                dataSource: inlineDefault,
                loadOnDemand: false,
                dataBound: function(e){

                     if (!e.node) {
                      var rootItems = e.sender.dataSource.data();
                      addClass(e.sender, rootItems);
                   } else {
                        var rootItem = e.sender.dataItem(e.node);

                      var subItems = rootItem.children.data();
                      addClass(e.sender, subItems);

                             }
                }
            });


        </script>

Answer 3

Just iterate over all the li nodes and check if it has children and add the class.

$("#treeview").kendoTreeView({

    dataSource: [{
        text: "My Documents",
        expanded: true,
        items: [{
                text: "Kendo UI Project",
                expanded: true,
                items: [{
                        text: "about.html"
                    },
                    {
                        text: "index.html"
                    },
                    {
                        text: "logo.png"
                    }
                ]
            },
            {
                text: "New Web Site",
                expanded: true,
                items: [{
                        text: "mockup.jpg"
                    },
                    {
                        text: "Research.pdf"
                    },
                ]
            },
            {
                text: "Reports",
                expanded: true,
                items: [{
                        text: "February.pdf"
                    },
                    {
                        text: "March.pdf"
                    },
                    {
                        text: "April.pdf"
                    }
                ]
            }
        ]
    }]
});
var treeview = $("#treeview").data("kendoTreeView");
$.each($('#treeview li'), function() {
    var node = treeview.dataItem($(this));
    if (node.hasChildren) {
        $(this).find('.k-in').addClass('folder');

    } else
        $(this).find('.k-in').addClass('leaf');
});

.folder { color:green; }
.leaf { color:red; }

<head>
<title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="treeview"></div>
   </body>