Expand nodes util selected ones in Treeview component

[gil]

Hello,

 

I've been struggeling for sometime to figure out how to do this. I have a list of checkedKeys, and I must open the treeview with all the parent nodes for each id expanded.

 

This is my treeview element :

<kendo-treeview
            style="max-height: 400px; height: 400px"
            [nodes]="parsedData"
            textField="name"
            [children]="children"
            [hasChildren]="hasChildren"
            [(checkedKeys)]="checkedKeys"
            [kendoTreeViewCheckable]="checkableSettings"
            kendoTreeViewExpandable
            kendoTreeViewCheckable
            [animate]="false"
            [(expandedKeys)]="expandedKeys"
            [expandBy]="'id'"
            [checkBy]="'id'"
            [isChecked]="isItemChecked"
        ></kendo-treeview>

And on the ngOnInit I call this 

this.parsedData.forEach(mt => {
    this.setExpandedNodes(mt);
});

And finally this is the setExpandedNodes function:

    setExpandedNodes(node: PropertyNode) {
        if (node.children) {
            node.children.forEach(el => {
                if (el.children && el.children.length > 0) {
                    el.children.forEach(chld => {
                        if (this.checkedKeys.includes(chld.id)) {
                            this.expandedKeys.push(el.id);
                            console.log('Pushed to expanded keys', el);
                        }
                        this.setExpandedNodes(chld);
                    });
                }
            });
        }
    }

Anybody know how can I achieve this?

Thanks for the help.

[Martin]

Hello Gil,

Using the kendoTreeViewExpandable directive and binding the expandedKeys property is the right way to go when you want to manually expand/collapse TreeView nodes in certain conditions. The developer could also specify the item key that will be stored in the expandedKeys collection, by setting the expandBy property. However, I am not sure what you mean by -"I must open the treeview with all the parent nodes for each id expanded".

Please could you add as a comment to this answer (or your question) some more details about the scenario, and how the TreeView should behave in this case. Thanks for your cooperation.

Regards,
Martin
Progress Telerik

[gil]

I meant that if I have for example a checked element which is 5 level deep nested, all the parent nodes should be expanded, to be able to see the checked item at opening

[Martin]

Indeed there is no built-in option that could provide such functionality out of the box, but using the suggested kendoTreeViewExpandable is the way to go. The developer can add the desired node indexes by using some custom function that iterates all node items array like the following:

   public setIndexesRecursively(arr, prefix = ''){
      arr.forEach((i, idx) =>{
        i.index = prefix + idx;
        this.allIndexes.push(i.index);
        if(i.items){
          this.setIndexesRecursively(i.items, i.index + '_');
        }
      });

    }

Once the indexes are computed they can be used for any further purpose.