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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
@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
}
} |
