Expand All child grids and grandchild grids

Question

Hi,I have a grid with 2 leverls of hierachy - eg the child grid has a child grid (grandchild). I have succensfully added a toolbar button to expand all child grids but i would like to be able to also expand the grandchild grids at the same time. Below is my code which i would expect to work but as you can seethe detailRowModule of the childgrid is null so it does not.Could you advise of a way to make this happen.thanksadamif (args['item'].id === 'ExpandAll') {
    gridObj.detailRowModule.expandAll(); //works
    if (gridObj.childGrid != null) { 
        gridObj.childGrid.detailRowModule.expandAll(); // not working.. childGrid.detailRowModule is always null?
    }
}

Manikandan Nallathambi · Accepted Answer

Hi Adam, 
 
Greetings from Syncfusion support. 
 
Based on your query, we could understand that your requirement is to expand the child grids and grandchild grids on toolbar click. This can be achieved using the Grid’s toolbarClick and dataBound event as explained below, 
 
Initially in the toolbarClick event the child grids are expanded using the detailRowModule’s expandAll method. The in the child Grid’s dataBound event, the grandchildren can be expanded with the child Grid instance(can be accessed here using ‘this’ keyword) using the detailRowModule’s expandAll method. A flag and count variable is used here to ensure the expand all is executed only on toolbar button click. 
 
Please find the below code example and sample for more information, 
 
Code example: 




Index.ts 
let expandGrandChild = false; 
let expandCount = 1; 
 
// Parent toolbar click event handler 
  toolbarClick: args => { 
    if (args.item.text === "expandAll") { 
      expandCount = 1; 
      expandGrandChild = true; 
      grid.detailRowModule.expandAll(); 
    } 
  }, 
   
// Child grid dataBound event handler 
dataBound: function(args) { 
        if(expandGrandChild) { 
          this.detailRowModule.expandAll(); 
          if (expandCount >= this.currentViewData.length) { 
            expandGrandChild = false; 
          } 
          expandCount++; 
        } 
 } 
 
Sample: https://stackblitz.com/edit/7xpgkc-cv9bwf?file=index.ts 
 
toolbarClick: https://ej2.syncfusion.com/angular/documentation/api/grid/#toolbarclick 
 
dataBound: https://ej2.syncfusion.com/angular/documentation/api/grid/#databound 
 
Please get back to us if you need further assistance. 
 
Regards 
Manikandan N

Adam Toone · Answer

Thanks, that worked a treat!adam

Rajapandi Ravi · Answer

Hi Adam, 

Thanks for the update 

We are happy to hear that our suggested solution was working fine at your end. 

Please get back to us if you need further assistance.  

Regards,  
Rajapandi R