Refresh Grid without close child opened

Question

Hi,I am using grid and child grid. When I update the data within the Child Grid, I refresh the Grid, but with the refresh, the child grid that i have opened, is closed.In this Stackblitz when I click on "Update Child" button with first child grid opened, after refresh the child grid is closed:https://stackblitz.com/edit/angular-f151306-epoufb?file=app.component.tsHow can i not make it close?Thanks

Sujith Kumar Rajkumar · Answer

Hi Fabio, 
 
Greetings from Syncfusion support. 
 
Based on the query we would like to let you know that on refreshing the parent Grid or updating the parent or child grid data source(which automatically refreshes the Grid), the entire Grid will be re-rendered and so all the expanded parent rows will be collapsed. This is the default behavior of this case. 
 
However if you need to maintain the state for this case, it can be achieved by storing the expanded parent row indexes in a global variable before refreshing the Grid and then expanding these in the parent Grid’s dataBound event(Triggers on Grid refresh/data change) using a flag variable(can be enabled while storing the expanded parent row indexes) to denote this case. The expand can be performed by passing the stored row index to the detail row module’s expand method. 
 
This is demonstrated in the below code snippet, 
 




public indexes; 
public expandFlag = false; 
 
// Function for storing expanded parent row indexes 
storeExpandedIndexes() { 
    // Retrieves the expanded row elements 
    var expandedElements = this.gridObj.element.querySelectorAll('.e-detailrowexpand'); 
    this.indexes = []; 
    // Parent row indexes of the expanded child Grid are pushed to global variable – “indexes” 
    expandedElements.forEach(ele => this.indexes.push(parseInt(ele.closest('.e-row').getAttribute("aria-rowindex")))) 
    // Flag is enabled to denote this case 
    this.expandFlag = true; 
} 
 
// Grid’s dataBound event handler 
dataBound() { 
    if (this.expandFlag && this.indexes.length !== 0) { 
        // Condition executes on global flag enabled case 
        // The global flag is disabled so that this case is not executed on consecutive event triggers 
        this.expandFlag = false; 
        // Each stored parent row index is expanded 
        this.indexes.forEach(ind => this.gridObj.detailRowModule.expand(ind)); 
        this.indexes = []; 
    } 
} 
 
btnParent(){ 
    // Here the function for storing the expanded parent row indexes is called 
    this.storeExpandedIndexes(); 
             ... 
} 
 
btnChild(){ 
    // Here the function for storing the expanded parent row indexes is called 
    this.storeExpandedIndexes(); 
             ... 
} 
 
We have modified the shared sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-f151306-9jd8hi?file=app.component.ts 
 
Note: On using the above approach flickering will occur in the Grid since the collapsed parent row Grid(on Grid refresh) is expanded again.  
 
API: https://ej2.syncfusion.com/angular/documentation/api/grid/#databound 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R