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. Image for the cookie policy date
close icon

Capture the Collapse/Expand on Hierarchy Grid.

Hi

Just a simple question: Is there any events on the Grid or method to capture the Collapse/Expand on the Hierarchy Grid ?

Best Regards
Jakob

9 Replies

VA Venkatesh Ayothi Raman Syncfusion Team August 24, 2017 07:17 AM UTC

Hi Jakob, 


Thanks for contacting Syncfusion support. 


Yes, we have built-in events to capture the Expand/Collapse the Hierarchy Grid which is named as follows detailsExpand and detailsCollapse. Please refer to the following Help documentation and sample for your reference, 

Help documentation: 



Regards, 
Venkatesh Ayothiraman. 



JH Jakob Harper August 24, 2017 08:02 AM UTC

For some reason I expected that to expand/collapse details for selected record and not the child.

Thank You.

/Jakob



MS Mani Sankar Durai Syncfusion Team August 25, 2017 08:38 AM UTC

Hi Jakob, 

We have analyzed your query and we suspect that you would like to expand or collapse the selected record in grid. To expand or collapse the selected records we suggest you to use expandCollapse method in grid.  
Refer the documentation link:  
Also to get the event when record selected use rowSelected event in grid.  
If you declared the expandCollapse method inside the rowSelected event, upon selecting the row it will expand or collapse the corresponding row details. 

Please let us know if you need further assistance 

Regards, 
Manisankar Durai. 




TT ttArbor April 29, 2019 01:45 PM UTC

Are detailscollapse  and detailsexpand events available in angular hierarchy grid ? 


VN Vignesh Natarajan Syncfusion Team April 30, 2019 09:22 AM UTC

Hi Thao,  
 
Thanks for contacting Syncfusion forums.  
 
Query: “Are detailscollapse  and detailsexpand events available in angular hierarchy grid ? 
 
Yes. We have support for detailsExpand and detailsCollapse event in angular hierarchy Grid. Refer the below link for API documents for angular platform.  
 
API Document: 
 
 
 
Please get back to us if you have further queries.  
 
Regards,  
Vignesh Natarajan.   



AA Ahmad Al Edlbi December 24, 2020 11:48 AM UTC


I can't find the detailCollpase event in the Angular Grid API.
 
Could you please tell me which event can be used as a substitute?

Best Regards
Ahmad


SK Sujith Kumar Rajkumar Syncfusion Team December 28, 2020 10:16 AM UTC

Hi Ahmad, 
 
Greetings from Syncfusion support. 
 
You can use the Grid’s internal event – “detail-state-change” to capture the hierarchy Grid’s expand and collapse action. This event can be bound to the Grid using its “on” method in the dataBound event as demonstrated in the below code snippet, 
 
export class AppComponent { 
    @ViewChild("grid") 
    public grid: GridComponent; 
    public initialFlag = true; 
 
 
     // Grid’s dataBound event handler 
    dataBound() { 
         // This event will be triggered each time the grid data is modified, so flag variable is used so that this case is executed only on Grid initial render 
        if (this.initialFlag) { 
            this.grid.on("detail-state-change", this.detailChange, this.grid); 
            this.initialFlag = false; 
        } 
    } 
 
    // Grid’s “detail-state-change” internal event function 
    detailChange(args: any) { 
        alert('Detail change event triggered'); 
    } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
Note: This event will not be triggered on initial expand action of the hierarchy row for which you can use the detailDataBound event. 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 



MA Matthieu June 8, 2021 11:59 PM UTC

Hello,

Also on angular, I have a follow up question:
How can I bind this "detail-state-change" event on a child grid (to track the expand/collapse of a 2nd level grid)?

Thanks!
Matt


SK Sujith Kumar Rajkumar Syncfusion Team June 9, 2021 09:13 AM UTC

Hi Matt, 
 
Greetings from Syncfusion support. 
 
You can achieve your requirement by using the detailDataBound event(on the child Grid) to retrieve the closest child Grid instance(using the ‘e-grid’ class element) and binding the ‘detail-state-change’ event to it as demonstrated in the below code snippet, 
 
// Child Grid’s detailDataBound event handler 
childDetailDataBound(args: any) { 
    // The child Grid instance is retrieved from the closest Grid element 
    let childGridInst = args.detailElement.closest('.e-grid').ej2_instances[0]; 
    // The ‘detail-state-change’ event is bound using the retrieved child Grid instance 
    childGridInst.on("detail-state-change", this.childDetailChange, childGridInst); 
    alert('Child row initial expand(detailDataBound event triggered)');  
} 
 
// Child Grid’s ‘detail-state-change’ event handler 
childDetailChange(args: any) {  
    alert('Child detail change event triggered');  
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


Loader.
Live Chat Icon For mobile
Up arrow icon