|
@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
}
} | 
