Telerik kendo-grid Paging - 第一次加载时间过长答案

【问题标题】：Telerik kendo-grid Paging - Taking too much time to load for the first timeTelerik kendo-grid Paging - 第一次加载时间过长
【发布时间】：2021-10-19 07:57:58
【问题描述】：

我正在使用 Angular 6 和 Telerik kendo-grid 4.8.4

以下是剑道网格的示例代码

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

尝试点击以下链接

Server side parameters from kendo grid in angular component

上述链接中的分页工作正常。

第一次加载网格需要 20 秒，因为它试图获取大约 20,000 条记录。

如何修改当前的 kendo-grid 只获取前 10 条记录？

点击页码后，能否再次从服务器获取？

任何帮助将不胜感激。

【问题讨论】：

我正在使用 WebAPI 方法从服务器端获取数据。我唯一需要做的就是如何根据点击网格底部的页码来获取第一条或下一条记录。

标签： angular kendo-ui kendo-grid kendo-ui-angular2

【解决方案1】：

如果你也发布一些 ts 代码会有所帮助。

如何修改当前的 kendo-grid 只获取前 10 条记录？

将state.take 设置为10 并将state.skip 设置为0 并进行http 调用以获取数据。

点击页码后，能否再次从服务器获取？

是的，在 ts 中的 dataStateChange(event: DataStateChangeEvent) 中，您应该像 this.state = event; 一样将 event 附加到 state 并进行 http 调用以检索相应的数据（例如，只需 console.log(event)，您将在页面上看到3 event.skip 将是 20，在第 4 页 event.skip 将是 30，等等）。

【讨论】：