Updating nodes in tree with virtual scroll breaks tree - like load more nodes function
See original GitHub issueMinimal reproduction of the bug/regression with instructions:
Updating nodes and calling treeModel.update()
with virtual scroll leads to a collapsing tree and finally a tree stuck in loading… This is only present in virtual scroll. Setting virtual scroll to false will fix the problem.
Stackblitz uses an example where the child nodes are loaded in steps with a load more functionality 100 nodes each time.
Link to Stackblitz reproduction
Repo steps:
- Open root node
- Click load more
- Root node will collapse
- If this is repeated multiple times tree is stuck in loading…
Expected behavior:
Tree behaves the same in virtual and non-virtual scroll.
Versions of Angular Tree Component, Angular, Node, affected browser(s) and operating system(s):
First noticed in version 8.5
, still there in 10.0.0
.
Other information:
Issue Analytics
- State:
- Created 3 years ago
- Comments:9 (7 by maintainers)
Top Results From Across the Web
Angular: How to use Virtual Scroll with a Flat Tree? - OctoPerf
Update the Tree Node Component. The Virtual Scroll does View Recycling by default to improve rendering performance. The size of the view cache ......
Read more >How to Render Large Tree Data Structures in Angular
From a high-level perspective, virtual scrolling allows the client to render just a small portion of the entire list at a time, for...
Read more >Large Trees & Virtual Scroll - Getting Started
When having a large amount of nodes and experiencing performance issues, it is recommended to use the virtual scroll option.
Read more >Missing tree data with virtual scroll with flex height for angular ...
When you use height: 100%; and expand the tree, the virtual scroll's viewport height is not getting updated to the new height of...
Read more >Virtual Mode - AngularJS Tree View - DevExtreme
In virtual mode, the TreeView loads a node's children when the node is expanded for the first time. This enhances performance on large...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Can confirm that removing the
ngZone
fixes the update issue and has very good performance. @Cowraider, when you have your PR ready we will merge it into the repo.Because this issue is in a few versions we will release this fix in all the mayor versions with the
@circlon
namespace (11
,10
and9
).🎉 Great work @Cowraider , and my apologies for inadvertently creating this issue.