p-tree: Enabling Virtual Scroll causes bug when you add children nodes dynamically

UI Components for Angular
Post Reply
Posts: 3
Joined: 05 Aug 2022, 08:09

05 Aug 2022, 08:15


I want to load children nodes by expanding the parent node. Everything works fine, when i click on the node i call an API and then i append the children to the parent. The ui updates. Another requirement is that the tree need to be scrollable. So i added virtual scrolling to the tree. Now i have a bug. When i click on the first node, i call the api, i append the children to the parent but on the ui nothing happens. When i click on another parent node, then the children of the first node appear. See stackblitz and repro steps.

Stackblitz: https://stackblitz.com/edit/primeng-tre ... onent.html

Steps to reproduce the behavior
1 step: Go to the lazy loading example in the documentation: https://www.primefaces.org/primeng/tree/lazy
2 step: Click on the Edit in StackBlitz button and open the example
3 step: Copy the code that enables virtual scrolling from the demo of the Scroll sectionEdit in StackBlitz
4 step: Add [virtualScroll]="true" [virtualNodeHeight]="33" scrollHeight="200px" attributes to the p-tree component in the lazy loading example
5 step: Click on the first node. Notice nothing will happen.
6 step: Click on the second node. Notice that the children of the first node appear, but not the children of the second node.

Has anyone else got this issue? Is there any work around?

Posts: 3
Joined: 05 Aug 2022, 08:09

05 Aug 2022, 11:17

I found one work around:
I store the data from the API in an NGRX store. In my component i select this data with a selector. I transform the data from to store to TreeNode array with a recursive function. On node expand i call the backend and i concat the respons to my ngrx store. This way the ui refreshes.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests