Is there a way for me to detect when a grouped category is collapsed or expanded?
Please see this example: https://stackblitz.com/edit/angular-u7ccbo
When I try to collapse or expand a category, there's a slight pause that causes the web application to hang. Instead of that happening, I would like to place a loading overlay so that the user is disabled from doing anything until the category has collapsed or expanded.
Thanks.
1 Answer, 1 is accepted
Hi Charles,
When there are time-consuming synchronous operations that are blocking the main thread, the suggested approach is to make them asynchronous (for example via calling the time-consuming operation in a setTimeout).
This way a loading indicator can be displayed before starting the time-consuming operation, and hidden synchronously after the operation is complete (in the body of the setTimeout callback, right after calling the time-consuming operation).
Here is a runnable sample demonstrating the suggested approach:
https://stackblitz.com/edit/angular-u7ccbo-byqlyn?file=app/app.component.ts
However, I am afraid that the loading indicator cannot be rendered when the user expands or collapse the groups. By default, when the gropups are created they are expanded. When they are collapsed and expanded again, the data is not rerendered as the elements are persisted in the DOM. Thus there is no indication from the browser when it starts and when finishes. Showing a loading indicator of something that is already rendered is not a good practice.
We understand that the such performance issue might be unacceptable, that is why we recommend using paging or virtual scrolling in order to reduce the items rendered in the DOM at a time. Here is the respective articles:
Virtual scrolling with grouping:
Paging:
https://www.telerik.com/kendo-angular-ui/components/grid/paging/
I hope this helps.
Regards,
Martin
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.