Expand mode to be single in Hierarchy grid and log column values of expanded row

[Kunal Bajaj]

I am trying to implement hierarchy grid, in which I want to collapse other expanded grid and only open the one intended. Also I want to log the data in console for which the row is expanded. I tried using detailsDataBound method but it triggers only once and after that it is not logging values.

Sample Table structure: 

I want to implement the collapse other and expand one thing for both parent and child tables. Thanks in advance!!

[Seeni Sakthi Kumar Seeni Raj]

Hi Kunal 

Greetings from Syncfusion.  

We could see you would like to collapse all the rows except the currently expanding Row. We have achieved this by binding the capturing click event to the Grid element which will handle the required scenario for the Parent Element as well as its successor. Later, in the event, collapseAll method has been used to collapse the records. Refer to the following code example.  

   onLoad() : void { 

     // event capturing used 

     this.grid.element.addEventListener('click', this.collapseAll.bind(this), true); 

   } 

   collapseAll (args): void { 

     let tgt = args.target; 

     if (tgt.closest('.e-grid').getAttribute('id') !== this.grid.element.getAttribute('id')) { 

       // for child grid  

       if(tgt.classList.contains('e-dtdiagonalright') || tgt.classList.contains('e-detailrowcollapse')) {  

         tgt.closest('.e-grid').ej2_instances[0].detailRowModule.collapseAll(); 

       } 

     } else if(tgt.classList.contains('e-dtdiagonalright') || tgt.classList.contains('e-detailrowcollapse')) { 

        // for Parent Grid Alone 

        this.grid.detailRowModule.collapseAll(); 

      } 

   } 

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data' (load)='onLoad($event)' [childGrid]="childGrid" > 

             . . . 

                  . . .. 

    </ejs-grid> 

</div> 

 

Demo: https://stackblitz.com/edit/angular-jrmaaq?file=app.component.html 

https://ej2.syncfusion.com/angular/documentation/api/grid/detailRow/#collapseall 

Regards,  

Seeni Sakthi Kumar S 

[Kunal Bajaj]

Hello Seeni,

Thanks for your help here.

Can you please let me know I need to capture the data for the expanded one as well but I am not able to achieve that using details Expand method. I tried using details Data Bound method but that works only once, but I want it to happen in every expansion. Can you please let me know the method to use here. Thanks!

[Seeni Sakthi Kumar Seeni Raj]

Hi Kunal,  

You can use getRowObjectsFromUID to get a row details. Refer to the following code example.  

   collapseAll (args): void { 

     let tgt = args.target; 

     if (tgt.closest('.e-grid').getAttribute('id') !== this.grid.element.getAttribute('id')) { 

       // for child grid  

       if(tgt.classList.contains('e-dtdiagonalright') || tgt.classList.contains('e-detailrowcollapse')) { 

         var inst = tgt.closest('.e-grid').ej2_instances[0]; 

         console.log(inst.getRowObjectFromUID(tgt.closest('.e-row').getAttribute('data-uid')))  

         inst.detailRowModule.collapseAll(); 

       } else if (tgt.classList.contains('e-dtdiagonaldown') || tgt.classList.contains('e-detailrowexpand')) { 

         var inst = tgt.closest('.e-grid').ej2_instances[0]; 

         console.log(inst.getRowObjectFromUID(tgt.closest('.e-row').getAttribute('data-uid'))); 

       } 

     } else if(tgt.classList.contains('e-dtdiagonalright') || tgt.classList.contains('e-detailrowcollapse')) { 

        console.log(this.grid.getRowObjectFromUID(tgt.closest('.e-row').getAttribute('data-uid'))); 

        // for Parent Grid Alone 

        this.grid.detailRowModule.collapseAll(); 

      } else if (tgt.classList.contains('e-dtdiagonaldown') || tgt.classList.contains('e-detailrowexpand')) { 

        console.log(this.grid.getRowObjectFromUID(tgt.closest('.e-row').getAttribute('data-uid'))); 

       } 

   } 

This solution will work for expanding as well as collapsing the Parent Grid and Child Grid rows.  

Modified demo: https://stackblitz.com/edit/angular-jrmaaq-vdzhu9?file=app.component.ts 

Regards,  

Seeni Sakthi Kumar S