How to expand PrimeNg TreeTable by code

Question

Assuming I have a TreeTable provided by PrimeNg for Angular2. How can I expand a particular node in code (for example in onNodeSelect callback)?

although is not related to `treetable` could be used as inspiration: http://stackoverflow.com/questions/38285593/how-to-initialize-primeng-tree-component/38285594#38285594 — Sergio, Jul 09 '16 at 20:05

score 20 · Accepted Answer · answered Dec 20 '16 at 19:26

20

I guess the OP no longer needs the answer, but for anyone who reaches here and finds no answer -

There is a property expanded for TreeNode, all you need to do is just set it to true

selectedNode.expanded=true;

And if you want the tree to be shown all expanded, just traverse the TreeNodes and set expanded on each. Which will be something similar to this

  expandChildren(node:TreeNode){
    if(node.children){
      node.expanded=true;
      for(let cn of node.children){
        this.expandChildren(cn);
      }
    }
  }

answered Dec 20 '16 at 19:26

prajeesh kumar

1,916
1
17
17

Possible to do the same but make it selected? – Baked Inhalf Nov 02 '17 at 14:53
4

this only change the icon does not expand or collapse the table – Ahsan Sohail Mar 18 '19 at 09:58
@AhsanSohail The answer is years old, when the angular version was 1.2 – prajeesh kumar Apr 06 '19 at 23:46
@prajeeshkumar So.. how can i expand tree node in 2019? Would you share a solution please? – vladimir khozeyev Oct 31 '19 at 11:26
@vladimirkhozeyev Haven't worked in angular for sometime now, will update if I do – prajeesh kumar Nov 12 '19 at 15:37
@prajeeshkumar thank you in advance. I found just one solution, and it is out of MVVM concept (find expand button in DOM and emulate mouse click). – vladimir khozeyev Nov 13 '19 at 16:05
@vladimirkhozeyev i used the same sollution but i added a methode to update visibility, but it dosent seems clean because it refrech th ui updateVisibility(): void { this.visible = false; setTimeout(() => (this.visible = true), 0); } – fbm fatma Apr 15 '20 at 09:25
You need to keep the change detection in mind. Due to performance, changes are only detected, when the reference of the value changes. So if you are iterating over your tree and change the expanded attribute of nodes in your tree, you need to update the reference like for example: this.yourTreeTable = [...this.yourTreeTable]. Then your UI will be refreshed. It is here documentated under [Change Detection] (http://primefaces.org/primeng/v9.1.5-lts/#/treetable) – Benjamin Steiner Sep 11 '20 at 09:31

Sharath · Answer 2 · 2022-03-30T05:36:17.970

Once the code mentioned by prajeesh kumar is executed, to get the tree table refreshed, please add the following line of code:

this.treeNodeData = [...this.treeNodeData];

You can call the expandChildren() method like this:

  expandTreeNodes() {
    if (this.treeNodeData) {
      this.treeNodeData.forEach(x => this.expandChildren(x));

      // Below line is important as it would refresh the TreeTable data,
      // which would force automatic update of nodes and since expanded
      // has been set to true on the expandChildren() method.

      this.treeNodeData = [...this.treeNodeData ]; 
    }
  }

score 1 · Answer 3 · answered Mar 29 '18 at 09:33

Using above I just wrote function for expanding/collapsing entire treatable nodes.

In my template I am passing entire treetable json to exapandORcollapse

<button type="button" (click)="exapandORcollapse(basicTreeTable)">Collapse /Expand all</button>
 <p-treeTable [value]="basicTreeTable" selectionMode="single" [(selection)]="selectedPortfolio" (onNodeSelect)="nodeSelect($event)"
            (onNodeUnselect)="nodeUnselect($event)" (onRowDblclick)="onRowDblclick($event)" scrollable="true">

In my component.ts file

 exapandORcollapse(nodes) {
    for(let node of nodes) 
  { 
    if (node.children) {
        if(node.expanded == true)
          node.expanded = false;
          else
          node.expanded = true;
        for (let cn of node.children) {
            this.exapandORcollapse(node.children);
        }
    }
  }
}

In my case completely doesn't works, it doesn't show children, only caret change — Avtandil Kavrelishvili, Apr 25 '20 at 13:02
its only expanded upto certain levels not deeply expanded or collapsed. — Maulik, Oct 07 '20 at 04:09

score 0 · Answer 4 · edited Aug 20 '21 at 16:54

0

I did the same but I cloned the same tree object to itself and it worked.

this.treeData.forEach((node) => {this.expandRecursive(node, true);});
this.treeData = _.cloneDeep(this.treeData);

edited Aug 20 '21 at 16:54

Spencer

2,245
3
28
50

answered Aug 20 '21 at 11:53

Amey Rao

1
1

How to expand PrimeNg TreeTable by code

4 Answers4

Linked