PrimeNG Treetable adding nodes issue

4
votes

I'm using latest stable versions of Angular (6.0.9) and PrimeNG (6.0.1). When I try to add child node to selected node programmatically it doesn't show up unless i collapse and then expand selected parent node. First i tried

this.selectedNode.children.push(this.nodeToAdd);

Then I saw in official documentation that if "you manipulate the value such as removing a node, adding a node or changing children of a node, instead of using array methods such as push, splice create a new array reference using a spread operator or similar". So i tried this:

this.selectedNode.children = [...this.selectedNode.children, this.nodeToAdd];

but it results in same behavior. Does anyone facing same issue, or am I doing something wrong? Issue is happening in Chrome, Firefox and Edge

2
primengangular6
have you figured out how to fix it ? – antonyboom
Not yet :( I'm hoping it will be resolved in next PrimeNG version. – Mihajlo Jovanovic
Try to add primeicons, it solved my problems – antonyboom
I already have it. Updating version from "1.0.0-beta.9" to "1.0.0-beta.10" also didn't work out – Mihajlo Jovanovic
Updating to Angular 6.1.0, PrimeNg 6.0.2 and Primeicons 1.0.0-beta.10 didn't solve the issue... – Mihajlo Jovanovic

2 Answers

2
votes

I had the same issue after moving from PrimeNG 5 to 6. The solution from Artem worked, but also caused flashing of the treetable.

I found another solution - just change the reference of root nodes, this will refresh the tree. Add this line after adding / removing nodes:

this.roots = [...this.roots]; // change "roots" to your variable name
1
votes

I've faced the same issue, spread operator also haven't worked for me, but fortunately I found workaround here (here they trying to refresh prime-ng datatable) It's not direct solution, but it can save you while bug in component (i believe so) isn't fixed.

Here's code from original answer, slightly changed for treetable:

visible: boolean = true;
updateVisibility(): void {
  this.visible = false;
  setTimeout(() => this.visible = true, 0);
}
<button (click)="updateVisibility()">

<p-treeTable *ngIf="visible"></p-treeTable>

P.S. I use Angular 5, but hope it will help anyway