This is a migrated thread and some comments may be shown as answers.

Expanded node when async loading of hierachical treeview

2 Answers 903 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Aleksandr
Top achievements
Rank 1
Aleksandr asked on 27 Feb 2020, 06:04 PM

I want to create the tree with expanded static first level node.

I have an array with one object defined manually like: [{text: 'All Items', level: 0, link: '...', count: 0, items: [] }].

On ngOnInit I received data from Selector (async data source) and placed it to items[] for second level, refreshed count.

After that I want to load next levels data from another Selectors (async data source).

my function getChildren looks like:

 

if (expandedLevel === 0) => return array of items from manually created root node.

else => return (async data) from endpoint according needed level. 

 

But I can't to expand the first level programmatically via [expandedKeys]="['All Items']" and [expandBy]="'text'"

Can you help me please.

Regards.

2 Answers, 1 is accepted

Sort by
0
Preslava
Telerik team
answered on 02 Mar 2020, 09:37 AM

Hello Aleksandr,

In general, there are two ways to expand the TreeView nodes initially:

1. Use the built-in ExpandDirective to persist the expanded items based on their hierarchical index. Thus, one can programmatically set the value of the expandedKeys array.

https://www.telerik.com/kendo-angular-ui/components/treeview/expand-state/#toc-using-the-built-in-directive

Please check the following example:

https://stackblitz.com/edit/angular-jt3t2q?file=app/app.component.ts

2. Another solution is to set an item filed, for example, the id.

The following example demonstrates this solution:

https://stackblitz.com/edit/angular-365m1b?file=app/app.component.ts

It is important to note, that the TreeView renders the expand icons only after the children and hasChildren functions are defined. That is also shown in both of the provided examples above. 

In case, the above information does not answer your question, please could you modify one of the StackBlitz examples above with the used configuration so that we can reproduce the issue on our side. Thus we can inspect the code and be able to provide a more suitable solution. Thank you in advance.

Regards,
Preslava
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dominik
Top achievements
Rank 1
Veteran
Iron
answered on 29 Dec 2022, 02:17 PM

is that possible that this stopped working?

it works for us since years, but now after update from angular 10 to angular 14, and the newest kendo compatible with angular14

pushing Id's to expandedKeys array, is stopped working, treeview nodes is no longer expanded on this operation.

Tags
TreeView
Asked by
Aleksandr
Top achievements
Rank 1
Answers by
Preslava
Telerik team
Dominik
Top achievements
Rank 1
Veteran
Iron
Share this question
or