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

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

4 Answers 1184 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 20 Aug 2019, 08:57 PM

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.

4 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 22 Aug 2019, 08:02 AM
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
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.
Kristen
Top achievements
Rank 1
commented on 08 Sep 2023, 07:15 PM

Is there a way to show that spinner on node select?
Yanmario
Telerik team
commented on 12 Sep 2023, 07:23 AM

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

0
Ed
Top achievements
Rank 1
answered on 28 Aug 2019, 07:59 PM
Awesome, thanks!
0
Yuriy Rogach
Top achievements
Rank 1
Iron
answered on 09 Nov 2020, 09:32 PM

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.

 
0
Dimiter Topalov
Telerik team
answered on 11 Nov 2020, 08:43 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TreeView
Asked by
Ed
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Ed
Top achievements
Rank 1
Yuriy Rogach
Top achievements
Rank 1
Iron
Share this question
or