Grouped columns refresh

[Unknown]

Hello,

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.

[Pavithra Subramaniyam]

Hi AC, 

 

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. 

 

[component.ts] 

@Component({ 

    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)" > 

        <e-columns> 

           .  .  . 

        </e-columns> 

    </ejs-grid>', 

}) 

 

export class AppComponent { 

    .  .  . 

   ngOnInit(): void { 

        this.data = inventoryData.slice(0,10); 

        this.groupOptions = { showGroupedColumn: false, columns: ['Country'] }; 

    } 

    dataBound() { 

        if(this.initial){            

        this.grid.groupModule.collapseAll();  

         this.initial = false;  

    }  

    } 

    begin(e){ 

      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;  

      } 

    } 

    complete(e){ 

      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 

            } 

          } 

        }else{ 

           this.grid.groupModule.collapseAll();  

        } 

      } 

    } 

    refresh(e){ 

      this.grid.refresh();  // refreshed the Grid manually 

    } 

     

} 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin 

                              https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete 

                              https://ej2.syncfusion.com/angular/documentation/api/grid/group/#collapseall 

 

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

 

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

 

Regards, 

Pavithra S.