We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147291 Sep 5,2019 10:41 AM UTC Sep 10,2019 09:21 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Kunal Bajaj
Asked On September 5, 2019 10:41 AM UTC

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 [Syncfusion]
Replied On September 6, 2019 09:18 AM UTC

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> 
 




Regards,  
Seeni Sakthi Kumar S 


Kunal Bajaj
Replied On September 9, 2019 12:21 PM UTC

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 [Syncfusion]
Replied On September 10, 2019 09:21 AM UTC

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.  


Regards,  
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon