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

Grouped columns refresh


I have a grid with grouped column. By default the rows are collapsed. If I expand only one row is there a possibility after grid refresh (getting all new data from WebAPI) to leave only that row as expanded and the rest of them as collapsed? I want to see the grid after refresh with same expanded/collapsed rows like before refresh.

1 Reply

PS Pavithra Subramaniyam Syncfusion Team May 7, 2019 07:18 AM UTC

Thanks for contacting Syncfusion support. 
By default refreshing the Grid will expand all the grouped records. This is the default behavior. However you can achieve your requirement by storing the expanded rows before the refresh or any other actions that cause the Grid to refresh by using the “actionBegin” event. And in  actionComplete” event of refresh action you can expand/collapse the required rows based on the stored values. Please refer to the below code example, documentation link and sample link for more information. 
    selector: 'app-root', 
    template: '<button (click)="refresh($event)"> Refresh</button> 
       <ejs-grid #grid [dataSource]='data' allowSorting="true" [allowGrouping]="true" [groupSettings]="groupOptions" 
       (dataBound)='dataBound()' (actionBegin)="begin($event)" (actionComplete)="complete($event)" > 
           .  .  . 
export class AppComponent { 
    .  .  . 
   ngOnInit(): void { 
        this.data = inventoryData.slice(0,10); 
        this.groupOptions = { showGroupedColumn: false, columns: ['Country'] }; 
    dataBound() { 
         this.initial = false;  
      if(e.requestType == 'refresh'){ 
        // storing the expanded row index in a variable 
         let indexes: number[] = []; 
        let elements = this.grid.element.querySelectorAll('.e-recordplusexpand'); 
        for (let i = 0; i < elements.length; i++) { 
          let tr = elements[i].closest('tr'); 
          indexes.push((tr as HTMLTableRowElement).rowIndex); 
        this.state = indexes;  
      if(e.requestType == 'refresh'){  
       if (this.state.length) { 
          let elements = this.grid.getContentTable().querySelectorAll('tr'); 
          for (let i = 0; i < elements.length; i++) {                      
            let icon = elements[i].querySelector('.e-recordplusexpand'); 
            if(icon && !this.state.filter(ele=>ele==i).length ){ 
            (icon as any).click(); // collapse the row after refreshing 
      this.grid.refresh();  // refreshed the Grid manually 
Please get back to us if you need any further assistance on this. 
Pavithra S. 

Live Chat Icon For mobile
Up arrow icon