TreeView: process only nodes that meet certain criteria

[jalmartinez]

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="#:item.id#" data-uid="#:item.uid#" data-type="#:item.type#" data-isshop="#:item.isshop#">#:item.name#</div>
    # } #
</script>

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.item.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.

[Neli]

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.

 $('.custom').closest('.k-treeview-item').hide()

Here is a Dojo example where this is demonstrated.

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

 

Regards,
Neli
Progress Telerik