TreeView: process only nodes that meet certain criteria

1 Answer 27 Views
Data Source TreeView
Top achievements
Rank 1
jalmartinez asked on 23 Mar 2023, 10:45 AM

Hi all,

I have a JSON tree with 3 levels of depth that I want to transform into a TreeView with checkboxes. This tree is sent by a server and the nodes contain certain metadata that will help me to format the output. More specifically, if a node has "isshop" to 1, or "isshop" is 0 but "_chn" is 1, then I have to include it. If the node is not a shop and has no children I should not output it.

The issue is that using templates the most I have been able to reach is having gaps in the view where the filtered nodes should have been without applying conditions. Here is my template:

<script id="tvCentrosTmpl" type="text/kendo-ui-template">
    # if (item.isshop == 1 || (item.isshop == 0 && item._chn)) { #
        <div class="spnNameCentro" data-idmodel="" data-uid="#:item.uid#" data-type="#:item.type#" data-isshop="#:item.isshop#"></div>
    # } #

And in the checkboxes definition I am using this:

template: function(data){
    if (data.item.isshop == 1 || (data.item.isshop == 0 && data.item._chn))
        return '<input type="checkbox" class="chkParams" data-id="' + + '" data-isshop="' + data.item.isshop + '" onclick="srcInhibMasivas.chkCenter_click(this);" />'
    return '';

Here is an example output where "Z03" has no children and is not a shop:

Is there any way to leave the undesired nodes out without having to traverse and process the JSON client-side?

Thank you very much, best regards.

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 28 Mar 2023, 06:43 AM

Hello Juan,

I would suggest to add a custom class in the elements you need to hide.

 template: function(el){
          if(el.item.inStock > 3){
            return el.item.text
          return "<span class='custom'>" + el.item.text + " hhhh</span>"

Then, when the TreeView is rendered you can find the closest parent with 'k-treeview-item' class and hide it.


Here is a Dojo example where this is demonstrated.

I hope you will find the provided example helpful in resolving the issue.


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.

Data Source TreeView
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question