[Solved] Display count of children on treeView nodes

1 Answer 25 Views

TreeView

1 Answer, 1 is accepted

answered on 13 Mar 2026, 12:28 PM

Hi Lee,

Thank you for reaching out to us.

I have answered your question in the other thread, however, I will also add it here for visibility. The sample below uses the dataBound event to iterate through the items and gets the number of children for each parent node. Then appends a badge element with the count:

https://dojo.telerik.com/zMABgMdh/3

Let me know how this works for you.

Regards,
Viktor Tachev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Lee

commented on 13 Mar 2026, 03:40 PM

Thanks. I guess the count isn't available at the template level.

Viktor Tachev

commented on 16 Mar 2026, 03:10 PM

You can use the template option as well. The logic there would be a bit different.

A template would look similar to this:

<script id="treeview-template" type="text/kendo-ui-template">
            <span class="k-treeview-leaf-text">#: item.text #</span>
            # if (item.items) { #
			<span class="count-badge k-badge k-badge-info k-rounded-md k-badge-inline">#: item.hasChildren ? item.children.options.data.items.length
 : 0 #</span>
            # } #
        </script>

I have also prepared a sample dojo that illustrates the approach: https://dojo.telerik.com/tRnSmGvB

Lee

commented on 16 Mar 2026, 04:03 PM

This dojo seems to be blank. Also, when I use a template, I generally use the function version like this:

template: function(dataItem) {
   return ...
}

When I tried using item.children.options.data.items.length I always got 0.

Viktor Tachev

commented on 17 Mar 2026, 12:16 PM

Sorry for that, I have updated the dojo and this one shows the approach described in my previous post - https://dojo.telerik.com/vrpEIDrt

In case you are using a template function, the code would look similar to this:

template: function(e) {
                  debugger;
                  return `
                  <span class="k-treeview-leaf-text">${e.item.text}</span>
                  
                  ${ e.item.items? `<span class="count-badge k-badge k-badge-info k-rounded-md k-badge-inline">${e.item.children.options.data.items.length
}</span>` : ``}
                  `;
                },

Here is a dojo sample using a function for the template: https://dojo.telerik.com/cBDRzSeL