Telerik kendo-grid Paging - Taking too much time to load for the first time

Question

I am using Angular 6 and Telerik kendo-grid 4.8.4

Below is the sample code for the kendo-grid

<kendo-grid #grid="kendoGrid" class="k-grid-fullheight" (cellClick)="onCellClick($event)"
        (dataStateChange)="dataStateChange($event)" [sortable]="{allowUnsort: false, mode: 'single'}"
        [sort]="state.sort" [filter]="state.filter" [data]="TestData" [selectable]="selectableSettings"
        [pageable]="true" [pageSize]="state.take" [skip]="state.skip" filterable="menu" [reorderable]="true"
        (selectionChange)="selectionChanged($event)" [groupable]="false" [group]="state.group" [columnMenu]="true"
        [resizable]="true">

<kendo-grid-column showSelectAll="true" [width]="60" [minResizableWidth]="60">
          <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
              <input type="checkbox" (click)="SetAllSelected($event)" />
          </ng-template>
          <ng-template kendoGridCellTemplate let-dataItem>
              <input type="checkbox" [checked]="dataItem.selected" [attr.disabled]="dataItem.Name !== null  ? true : null" (click)=SetSelectedItem(dataItem) />
          </ng-template>
      </kendo-grid-column>
<kendo-grid-column field="Name" title={{NAME}} filter="text" [filterable]="true"
          headerClass="kendoColumn">
          <ng-template kendoGridCellTemplate let-dataItem>
            <a *ngIf="dataItem.Status === 0"
              [routerLink]="['/MyModule/details/'+dataItem.Id]">{{dataItem.Name}}</a>
            <span *ngIf="dataItem.Status === 1">{{dataItem.Name}}</span>
          </ng-template>
        </kendo-grid-column>
</kendo-grid>

Trying to the follow the below link

Server side parameters from kendo grid in angular component

Pagination works fine in the above link.

For the first time, the grid is taking 20 seconds to load because it is trying to fetch some 20,000 records.

How to modify the current kendo-grid to fetch only first 10 records?

On click of page number, can it be fetched from the Server again?

Any help would be greatly appreciated.

Answer 1

It would help if you post some ts code as well.

How to modify the current kendo-grid to fetch only first 10 records?

Set state.take to 10 and state.skip to 0 and make the http call to fetch data.

On click of page number, can it be fetched from the Server again?

Yes, in your dataStateChange(event: DataStateChangeEvent) in ts, you should attach event to state like this.state = event; and make the http call to retrieve the corresponding data (e.g. just console.log(event) and you will see that on page 3 event.skip will be 20, on page 4 event.skip will be 30, etc).