Kendo Angular TreeView - Expand/Collapse All

[Richard]

     I'm using the TreeView component for Angular.  Everything is loading fine.  Now I want to add a button to expand or collapse the whole tree.  How can I do this?

Also, any tips on making the checkboxes more defined would be helpful. They're a bit faint.

Thanks

[Svet]

Hi Richard,

We can use the isExpanded function of the TreeView component in order to implement an expand/collapse all functionality. Check the following example demonstrating this approach:
https://stackblitz.com/edit/angular-mypxcq?file=app/app.component.ts

About the styling, any Kendo UI for Angular component Kendo styles can be overwritten. Basically, we need inspect the DOM and locate the styles that we would like to modify. Check the following example demonstrating how to change the default border-color style of the checkboxes:
https://stackblitz.com/edit/angular-mypxcq-pqjq85?file=app/app.component.ts

I hope this helps. Let me know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Richard]

That is helpful, thanks.  However, now the issue is that the arrows cannot be used to individually expand/collapse a single tree node/parent and the only way to expand/collapse is by using the button and expanding/collapsing the whole tree. This issue exists in your example as well.  Is this expected or a bug?

[Richard]

In addition to the above issue, once you collapse the whole tree and then click the arrow next to a single node to open it, you get a spinning icon that never stops spinning and the node never opens.  See your example for this as well.

[Svet]

Hi Richard,

The current behavior is expected as the isExpanded function is implemented for each node whenever the TreeView is rendered. Consequently, when we try to expand or collapse a single node the TreeView is re-rendered and the isExpanded function returns true or false for all of the nodes.

Probably a more suitable solution would be to use the expandedKeys and expandBy properties of the kendoTreeViewExpandable directive in order to achieve the desired functionality. We can compute all of the parent nodes text properties:

public allParentNodes = [];
...
 ngOnInit(){
      this.getAllParentTextProperties(this.data);
    }

    getAllParentTextProperties(items: Array<any>){
      items.forEach(i =>{
        if(i.items){
          this.allParentNodes.push(i.text);
          this.getAllParentTextProperties(i.items);
        }
      })
    }

and pass these to the expandedKeys property when we need to expand all nodes:

expand(){
  this.expandedKeys = this.allParentNodes.slice(); //the slice method is used in order to return a new array instance so that the TreeView is re-rendered

}

Here is the complete demo:
https://stackblitz.com/edit/angular-mypxcq-yvc8ec?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Richard]

Thanks.  Our tree is a flat tree, so the all parent nodes calculation is different, but the premise of using the expanded keys to open and close the tree gets the job done.  I do think it would be a 'nice to have' if the control had its own expand and collapse methods. 

[Svet]

Hi Richard,

Thank you for the provided feedback. We will take it into consideration. I will proceed with setting this case to resolved now. However, feel free to reopen it by sending a new message to it in case further assistance is required on the same topic.

Regards,
Svetlin
Progress Telerik

[Ravi]

Hi, I am using TreeviewExpandable component but I am facing one issue that when i checked parent Node and when I expand that node and collapse that node and try to uncheck parent node then it become intermediate rather than unchecked?

can you please look into this?

 

[Svet]

Hi Ravi,

The original topic of the thread isn't related to the reported issue. Please open a separate support ticket on the new topic. Thank you in advance. That will help us to maintain a clean support history of our forum where each thread is based on a specific feature or a single issue.

The reported issue seems to be like the following one:

https://github.com/telerik/kendo-angular/issues/2387

Please track the issue status for any further updates on it. Let's keep any further information in the new ticket, where you could add any further relevant details. That will help us to keep separate matters within their own dedicated tickets. Thank you.

Regards,
Svetlin
Progress Telerik