Custom styling Kendo Treeview node text in trees loaded from JavaScript

Question

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

It's easy to customize node styles when instantiating trees from HTML, but for trees loaded from a local data source or read from a remote HierarchicalDataSource, there seem to be no way to alter the item's text per-node style:

the template option applies to all nodes in the tree
the spriteCssClass applies only to the node's icon

How can I achieve something like this while loading the tree from JavaScript?

enter image description here

Jarosław Kończak Jarosław Kończak · Accepted Answer · 2015-01-06T12:29:19

Why wouldn't you just use jQuery for it. Like this:

    $("#treeview").kendoTreeView({
        ...
        dataBound: function (e) {
            var text = "Your Text";
            e.sender.element.find("span.k-in:contains(" + text + ")").css('background-color', 'red');
        }
    });

Working example: http://dojo.telerik.com/oxUKI

Custom styling Kendo Treeview node text in trees loaded from JavaScript

1 Answers