Expand nodes util selected ones in Treeview component

1 Answer 449 Views
TreeView
gil
Top achievements
Rank 1
gil asked on 09 Jun 2021, 02:22 PM

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.

1 Answer, 1 is accepted

Sort by
1
Accepted
Martin
Telerik team
answered on 14 Jun 2021, 10:40 AM

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

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.

gil
Top achievements
Rank 1
commented on 14 Jun 2021, 11:03 AM

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
Telerik team
commented on 17 Jun 2021, 07:44 AM

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.

Tags
TreeView
Asked by
gil
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or