angular 组件中 kendo 网格的服务器端参数

Question

我正在使用 kendo 网格和 angular 4 并尝试实现服务器端自定义分页。

Kendo 网格在 javascript 方法中初始化。

问题是如何在页面更改事件中将服务器参数从 kendo 网格传递到 angular 组件？

Answer 1

Kendo 网格有一个页面更改事件，您可以调用它，这似乎是您正在使用的，那么您可以这样做：

import { Component } from '@angular/core';
import { products } from './products';
import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';

@Component({
  selector: 'my-app',
  template: `
      <kendo-grid
          [kendoGridBinding]="data"
          [pageSize]="pageSize"
          [skip]="skip"
          [pageable]="true"
          [height]="200"
          (pageChange)="onPageChange($event)"
        >
         <kendo-grid-column field="ProductID" title="ID" width="40">
         </kendo-grid-column>
         <kendo-grid-column field="ProductName" title="Name" width="250">
         </kendo-grid-column>
         <kendo-grid-column field="UnitPrice" title="Price" width="80" format="{0:c}">
         </kendo-grid-column>

         <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
            <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
            <kendo-slider
                [showButtons]="false"
                [tickPlacement]="'none'"
                [max]="totalPages"
                [min]="1"
                (valueChange)="sliderChange($event)"
                [value]="currentPage">
            </kendo-slider>
            <kendo-pager-info></kendo-pager-info>
            <kendo-pager-next-buttons></kendo-pager-next-buttons>
            <kendo-pager-page-sizes [pageSizes]="[5, 10, 40]"></kendo-pager-page-sizes>
         </ng-template>
      </kendo-grid>
  `
})
export class AppComponent {
    public data: any[] = products;
    public pageSize = 10;
    public skip = 0;

    public sliderChange(pageIndex: number): void {
        this.skip = (pageIndex - 1) * this.pageSize;
    }

    public onPageChange(state: any): void {
        this.pageSize = state.take;
    }
}

您可以在他们的分页文档中阅读更多相关信息：https://www.telerik.com/kendo-angular-ui/components/grid/paging/

angular 组件中 kendo 网格的服务器端参数

Server side parameters from kendo grid in angular component

pagination

kendo-grid

angular