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

[Sreevathsa]

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;

  }

 

[Martin]

Hello Sreevathsa,

Thank you for the provided code snippet.

Please check the following forum thread reply to see how the Kendo Angular Grid could be optimized:

https://www.telerik.com/forums/slowness-at-selecting-rows-when-page-size-is-large#5383732

Regards,
Martin
Progress Telerik