Is there a way to set a TreeView "busy" like Grid's loading?

[Ed]

I don't see anything in the docs but it seems like a standard thing to have.

What I'm looking for - the user will perform an action on a node in my TreeView which will result in a call to a remote API that can (sometimes) take several seconds.  I'd like to disable the TreeView or set it to loading so that the user knows there is some activity and to also prevent interaction with the TreeView.

What's the Kendo way to do this?  I can overlay a "busy" div but I'd like it to be visually close to the Grid loading appearance.

[Dimiter Topalov]

Hi Ed,

The TreeView has a built-in loading indicator that signifies an ongoing data retrieval action when expanding a node (a small circular animation replaces the expand icon).

If you need an overlay over the whole TreeView during data retrieval (or other custom time-consuming action), you can follow the approach for adding a custom Grid loading indicator from the following how-to documentation article:

https://www.telerik.com/kendo-angular-ui/components/grid/how-to/implement-loading-indicator-manually/#toc-implement-a-loading-indicator-manually

Here is the adjusted example:

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

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Kristen]

Is there a way to show that spinner on node select?

[Yanmario]

Hi Kristen,

Could you provide a bit more context on the desired requirement? In general, when using a remote server and expanding a node with our binding directive it will show a loading indicator in place of the expand arrow as demonstrated in one of our examples:

https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding/#toc-remote-heterogeneous-data

Do let me know if this is the desired requirement or different indicator is desired on a specific operation. 

Regards,
Yanmario
Progress Telerik

[Ed]

Awesome, thanks!

[Yuriy Rogach]

Hi Dimiter,

 

Is it possible to manually control a built-in loading indicator? The problem that in my case I'm fetching data from the store (NgRx) and when there is no data an observable of an empty array is returned. TreeView immediately renders expand icon not loading indicator.

 

[Dimiter Topalov]

Hello Yuriy,

 

Controlling the TreeView built-in indicator manually is currently not possible, as it is triggered automatically by the respective internal logic. The possible solution for scenarios in which the built-in behavior is not desirable, is to use a custom loading indicator that can be triggered by the developer whenever necessary (an example is available in my previous response). It is also worth mentioning that the new Loader component can be used instead of the custom overlay from the example.

As the possibility to control the built-in loading indicator via a configuration option similar to the Grid component "loading" Input, seems like a nice enhancement, if you have the time, please submit a feature request to our Feedback portal:

https://feedback.telerik.com/kendo-angular-ui/

We are tracking all feature requests, and periodically are considering to add some of them to our future plans based on the customer demand, and estimated business value.

Please briefly describe the usecase and the desired behavior so that other members of the community can gain a better understanding of the suggestion, and possibly upvote it more.

Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik