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

Question

我正在使用带angular 4的kendo grid，并尝试实现服务器端自定义分页。

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

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

Answer 1

Kendo Grid有一个页面更改事件，你可以调用它，它看起来就是你正在使用的，然后你可以这样做：

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/