question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Updating nodes in tree with virtual scroll breaks tree - like load more nodes function

See original GitHub issue

Minimal 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:closed
  • Created 3 years ago
  • Comments:9 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
tobiasengelhardtcommented, Feb 23, 2021

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 and 9).

1reaction
alechemycommented, Feb 23, 2021

🎉 Great work @Cowraider , and my apologies for inadvertently creating this issue.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found