Completed
Last Updated: 06 Apr 2023 11:10 by ADMIN
Release 4.2.0 (04/26/2023)
Jan
Created on: 28 Jan 2023 13:22
Category: TreeView
Type: Bug Report
1
Improve TreeView selection performance in WebAssembly

Hello,

I have a TelerikTreeView with about 2000 items bound to an ObservableCollection (Data). I use SelectedItems, SelectedItemsChanged, SelectionMode multitple and @bind-ExpandedItems.

When my users manually expand the nodes of the treeview, everything is fine and the operation of the treeview works smoothly. Loading UI components based on user selection takes less than 50ms.

As soon as I set the "ExpandedItems" collection from code (according to your treeview demo), the whole treeview operation becomes painfully slow with waiting times of 2 to 4 SECONDS for selection and expansion. Already expanding from code takes several seconds.

As soon as I reset the ExpandedItems from code and collapse the complete tree, the treeview is usable again without delays.


4 comments
ADMIN
Nadezhda Tacheva
Posted on: 09 Feb 2023 09:17

Hi Jan,

The case in terms of rendering time needed for the TreeList component is similar - if it has to show thousands of records at once, it will expectedly need more time to render compared to a scenario when only 10 or 20 items are shown on a page.

This is why we recommend using paging - this will reduce the time needed for rendering the component as it will display only the set of items for the selected page and not all the records form the data collection.

I was testing such a configuration but I am not experiencing issues with the selection, though. I am curious to find out whether the behavior is different on your end. If so, you may open a dedicated ticket for the TreeList and share a reproduction of the issue you are hitting.

Regards,
Nadezhda Tacheva
Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!
Jan
Posted on: 02 Feb 2023 16:59
Please note that also the TelerikTreeList seems to suffer from the same performance degradation if many nodes are expanded.
ADMIN
Nadezhda Tacheva
Posted on: 02 Feb 2023 16:46

Hi Jan,

In terms of rendering all 2000 records in the TreeView at once, I would say that this will certainly affect the rendering time. We will expose a node virtualization feature that will allow you to optimize the performance in such a scenario.

However, I do agree with you that the selection should not be performed slowly - it is a separate operation from expanding items/rendering the children.

I noticed that the issue occurs only in a WebAssembly application. In a Server-side application, there is no delay when selecting items.

Having the above in mind, I tweaked the title to indicate the specific issue. As a creator, you are automatically subscribed and will get timely status updates.

Regards,
Nadezhda Tacheva
Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!
Jan
Posted on: 28 Jan 2023 16:10

Apologies, further research has revealed that it is more likely related to the number of expanded nodes, not to the method of how to open them. Once 2000 nodes are expanded, all operations on the treeview (especially selection) become very slow.

2000 nodes in a treeview is not really a big data model for me. The really problematic point for me is: selection should not be slow after all the nodes have been expanded, selection and expansion should be separated. That the process of expanding many nodes takes a little while is fine. That selection takes seconds on a fully expanded treeview is not acceptable for the user.

This looks to me like event-delegate chaos based on the expansion process.

Also, the process of expanding so many nodes at once takes up the entire CPU load the browser may take (100% of one core in my case).