Capture the Collapse/Expand on Hierarchy Grid.

[Jakob Harper]

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

[Venkatesh Ayothi Raman]

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: 

1)      https://help.syncfusion.com/api/js/ejgrid#events:detailscollapse 

2)      https://help.syncfusion.com/api/js/ejgrid#events:detailsexpand 

Sample: https://jsplayground.syncfusion.com/wpdw3b0t 

Regards, 

Venkatesh Ayothiraman. 

[Jakob Harper]

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

Thank You.

/Jakob

[Mani Sankar Durai]

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:  

Link: https://help.syncfusion.com/api/js/ejgrid#methods:expandcollapse 

Also to get the event when record selected use rowSelected event in grid.  

Link: https://help.syncfusion.com/api/js/ejgrid#events:rowselected 

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. 

[ttArbor]

Are detailscollapse  and detailsexpand events available in angular hierarchy grid ? 

[Vignesh Natarajan]

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: 

 

https://help.syncfusion.com/api/angular/ejgrid#events:detailsexpand 

 

https://help.syncfusion.com/api/angular/ejgrid#events:detailscollapse  

 

Please get back to us if you have further queries.  

 

Regards,  

Vignesh Natarajan.   

[Ahmad Al Edlbi]

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

[Sujith Kumar Rajkumar]

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, 

 

Sample: https://stackblitz.com/edit/angular-qdvkd3-xijhcb?file=app.component.ts  

 

Note: This event will not be triggered on initial expand action of the hierarchy row for which you can use the detailDataBound event. 

 

API link: https://ej2.syncfusion.com/angular/documentation/api/grid/?#databound  

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Matthieu]

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

[Sujith Kumar Rajkumar]

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, 

 

Sample: https://stackblitz.com/edit/angular-mffutp?file=app.component.ts 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R