Hierarchy grid - reset row expanded state after grid refresh

[Matthieu]

Hi,

In my hierarchy grid (with 3 levels), I would like to be able to reset expanded/collapse row state when the main grid is refreshed (after data source changed).

So far, I am able to keep track of the first level's row state but I don't know how to keep track of the second level row state.

I don't know also how to reset the state after the grid refresh.

Have you a solution for my need?

Thanks in advance,

Regards,

Matt

[Rajapandiyan Settu]

Hi Matthieu,  

   

Thanks for contacting Syncfusion support. 

 

We have validated your requirement at our end. In EJ2 Grid, when we change the dataSource, the entire Grid will be refreshed. At this time, the Grid collapses all the detail row. The queryString value of the parent Grid also changed. So, we are unable to maintain the expand/ collapse state of child-Grids. This is not feasible at our end. 

Please get back to s if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[Matthieu]

Hi,

Is there a method to expand/collapse row detail grid dynamically?

Is there also a way to access the 'on' method on child grid (to bind to 'detail-state-change' event)? 

Thanks for your response.

Regards,

Matt

[Rajapandiyan Settu]

Hi Rogelio,    

    

Thanks for contacting Syncfusion support.  

  

Query #1: Is there also a way to access the 'on' method on child grid (to bind to 'detail-state-change' event)?   

   

When you expand the detail row of parent Grid, the detailDataBound event will be triggered. Here, you can get the corresponding childGrid instances. By using this, you can bind the detail-state-change event to the childGrid element.  

  

[app.component.ts]  

  

  

    <ejs-grid #Grid id='Grid' [dataSource]='parentData' [childGrid]='childGrid' (detailDataBound)="detailDataBoundParent($event)">  

        ---  

    </ejs-grid>  

  

  

[app.component.ts]  

  

  

  detailDataBoundParent(args) {  

    // this event triggered when expand the detail row of parent Grid  

    // get the childGrid instances and bind the detail-state-change event to the first-level child Grid  

    args.childGrid.on('detail-state-change', function(args) {  

      // this event triggered when expand/ collapse the detail row of first level childGrid  

      console.log(args);  

    });  

  }  

  

  

   

Query #2: Is there a method to expand/collapse row detail grid dynamically?  

  

To perform programmatic action on child-Grid, first, we need to get the instances of child-Grid element. Using this instances you can perform all the Grid actions programmatically. Please refer to the below code example and sample for more information.  

  

[app.component.ts]  

  

  

  detailDataBoundParent(args) {  

    setTimeout(() => {  

      // get the instances of childGrid and expand its detail row programmatically   

      args.childGrid.detailRowModule.expand(0);  

    }, 100);  

  }  

  

  

  

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

  

Please get back to us if you need further assistance with this.   

   

Regards,    

Rajapandiyan S  

[Matthieu]

Hi,

This is perfect, I'm now able to track and restore expand/collapse state of my 3 level hierarchy grid.

Thanks a lot for your reactivity!

Regards,

Matt

[Rajapandiyan Settu]

Hi Matthieu,  

 

You’re welcome. We are glad that the provided solution resolved your requirement. 

 

Regards, 

Rajapandiyan S