1. Home
  2. Forum
  3. Angular - EJ 2
  4. Expand all nodes under a node

Expand all nodes under a node

Hi,

I would like to expand a node in TreeGrid. Functionality would expand all nodes under the given node, not only one level.   Ideally expand based on primaryKey. 

I found things like:
ExpandAll - which expands everything in the tree

ExpandRow - expands a row, but only 1 level.


I found something similar in TreeView, however it expands only 1 level under node and does not exist for treeGrid.

https://stackblitz.com/edit/angular-414dbr-anbzcb?file=default.component.ts



5 Replies
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 14, 2021 01:46 PM UTC

Hi Michal, 

Thanks for your interest in Syncfusion Components.  

Query#:- Functionality would expand all nodes under the given node, not only one level.   Ideally expand based on primaryKey.  
 
We have checked your query and we also have the functionality similar to that TreeView. As you have mentioned that ExpandAll method is used to Expand All the nodes and ExpandRow method used to expand the particular row. 

Refer to the code below:- 
App.Component.html:- 
 
  <button ejs-button class="DefaultButton1" (click)="Expand($event)"> 
        ExpandAll 
    </button> 
    <button ejs-button class="DefaultButton2" (click)="Collapse($event)"> 
        CollapseAll 
    </button> 
    <button ejs-button (click)="expandNode()">Expand Row TaskID 6</button> 
    <ejs-treegrid #treegrid 
                  [dataSource]="data" 
                  height="350" 
                  /> 
     .    .   . 
             
</ejs-treegrid> 
 
App.Component.ts 
 
export class AppComponent { 
  public data: Object[] = []; 
  public toolbar: string[]; 
 
  @ViewChild('treegrid') 
  public treegrid: TreeGridComponent; 
  ngOnInit(): void { 
    this.data = sampleData; 
    this.pageSettings = { pageCount: 5 }; 
  } 
  actionBegin(args) {} 
  Expand() { 
    this.treegrid.expandAll();   //ExpandAll rows 
  } 
  Collapse() { 
    this.treegrid.collapseAll();   //CollapseAll rows 
  } 
  expandNode() { 
    var row = this.treegrid.getRowByIndex(5); 
    var data = this.treegrid.getCurrentViewRecords()[5]; 
    this.treegrid.expandRow(row, data);  //Expand specific row  
  } 
 

API link:- 
 
Please get back to us if you need any further assistance. 

Regards,
Farveen sulthana T 


MS Michal Szkudlarek December 14, 2021 01:53 PM UTC

Thanks for answer, but the solution provided is exactly what I described in my question.


ExpandRow - expands only one level under the node, not all children. I want to expand all children on all levels under that node.

In your example, if you change expansion code to:

    var row = this.treegrid.getRowByIndex(11);
    var data = this.treegrid.getCurrentViewRecords()[11];


It will expand only one level, leaving children collapsed.


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 15, 2021 02:37 PM UTC

Hi Michal, 

Query#:- ExpandRow - expands only one level under the node, not all children. I want to expand all children on all levels under that node. 
 
From your query we understood that you need to expand All nodes(including child records) on expanding each node. To achieve this requirement, we have loop through the child records and expand them by using the method expandRow method of Tree Grid. 

Refer to the code below:- 
App.Component.html:- 
 
<button ejs-button (click)="expandNode()">Expand Row TaskID 12</button> 
<ejs-treegrid #treegrid 
              [dataSource]="data" 
              height="350" 
              [pageSettings]="pageSettings" 
              [searchSettings]="searchSettings" 
              childMapping="subtasks" 
              [treeColumnIndex]="1" 
              [enableCollapseAll]="true" 
              (actionBegin)="actionBegin($event)"> 
 
            .     .    . 
</ejs-treegrid> 
 
App.Component.ts 
 
  @ViewChild('treegrid') 
    public treegrid: TreeGridComponent; 
     ngOnInit() : void { 
       this.data = sampleData; 
       expandNode() { 
       var row = this.treegrid.getRowByIndex(11); 
        var data = this.treegrid.getCurrentViewRecords()[11]; 
       if (!data.expanded) { 
        this.expand(row); //expand parent record 
      } 
      if (data.childRecords.length >= 0){ 
        this.expandinner(data.childRecords); //Check the inner level child records and expand all the nodes 
    } 
} 
 
expand(data) 
{ 
    this.treegrid.expandRow(data);    //expandRow method 
 
} 
expandinner(args) 
{ 
    for (var i = 0; i < args.length; i++) 
    { 
        if (args[i].expanded == false && args[i].childRecords != undefined) 
        { 
            var rows = this.treegrid.getRowByIndex(args[i].index); 
            this.treegrid.expandRow(rows); 
            if (args[i].childRecords.length >= 0) 
            { 
                this.expandinner(args[i].childRecords); 
            } 
        } 
    } 
} 
 
For more reference:- 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Farveen sulthana T 


MS Michal Szkudlarek December 16, 2021 11:29 AM UTC

Oh, I though there is an option to avoid tree traversal.

That is unlucky there there is no build-in functionality in TreeGrid to do that. Seems like a pretty obvious one, as treeGrid has all the information needed in order to expand all nodes.



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 18, 2021 07:27 AM UTC

Hi Michal, 

We have provided inbuilt support for this functionality in our Volume 4 release which is expected to release next week “We have expanded all nodes(Including child records) on performing expand action for specific row using Expanded event (by setting isExpanded property as true)”. 

Until then we appreciate your patience. 

Regards, 
Farveen sulthana T 


Loader.
Up arrow icon