Questions on Kendo UI for Angular Forum

1 question

1 answer

59 views

Angular Component has become slow when multiple kendo-grid's are there

I'm having six tabs and in all six tabs, I'm having a kendo-grid table. when I load the component it's becoming too slow(40 seconds) when working with 500 records. and I'm loading data from API(Backend) and data comes from the backend very quickly(1 second) and pagination is enabled.

I have even implemented virtual scrolling but didn't help me.

<kendo-grid [data]="gridDataOpen" [loading]="loaderVisible" [filterable]="true" [filter]="state.filter" 
                 scrollable="virtual" [rowHeight]="35" [sortable]="true" [sort]="state.sort" [pageSize]="state.take"    
[skip]="state.skip"[height]="700"(dataStateChange)="dataStateChange($event)"(pageChange)="pageChange($event)">
pageChange(e) {
    this.loaderVisible = true;
    this.state.skip = e.skip;
    this.loadItems(e);
}
public pageSize = 100;
  loadItems(state): void {
    this.gridDataOpen = {
      data: this.tableDataOpen.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataOpen.length,
    };
    this.gridDataAccepted = {
      data: this.tableDataAccepted.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataAccepted.length,
    };
    this.gridDataSubmitted = {
      data: this.tableDataSubmitted.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataSubmitted.length,
    };
    this.gridDataSubmissionAccepted = {
      data: this.tableDataSubmissionAccepted.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataSubmissionAccepted.length,
    };
    this.gridDataRejected = {
      data: this.tableDataRejected.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataRejected.length,
    };
    this.gridDataCancelled = {
      data: this.tableDataCancelled.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataCancelled.length,
    };
    this.loaderVisible = false;
  }
 