在 kendo 网格 angular 的顶部和底部显示分页和记录计数 2+

Question

我想在顶部和底部显示记录数的分页。默认情况下，它显示在 kendo 网格 angular 的底部。谁能告诉我如何同时显示顶部和底部？

Answer 1

是的，对 kendo 网格模板进行一些“黑客攻击”是可能的。

已向 Telerik 团队提交了一张与此相关的工单：

https://feedback.telerik.com/kendo-angular-ui/1360833-add-an-option-to-place-the-grid-pager-on-top-and-or-bottom?_ga=2.25947124.872125813.1622645938-1424594580.1622645938

'In order to show the Grid Pager at the top and bottom of the Grid, the Toolbar and the Pager template can be used together, as shown in the following example:'

https://stackblitz.com/edit/angular-ajraak-nwa5pq

It is worth mentioning, that the described custom approach is not fully tested and supported. Therefore, further modification might be needed.

完整代码：

import { Component, ViewEncapsulation } 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]="400"
    >
      <ng-template
        kendoGridToolbarTemplate
        kendoPagerTemplate
        [position]="'bottom'"
      >
        <div class="k-pager-wrap k-grid-pager k-widget">
          <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
          <kendo-pager-numeric-buttons
            [buttonCount]="5"
          ></kendo-pager-numeric-buttons>

          <kendo-pager-next-buttons></kendo-pager-next-buttons>
          <kendo-pager-info></kendo-pager-info>
        </div>
      </ng-template>

      <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>
    </kendo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
  styles: [
    `
      .k-grid-pager {
        order: -1;
        border-width: 0 0 1px;
        width: 100%;
      }
    `
  ]
})
export class AppComponent {
  public data: any[] = products;
  public pageSize = 10;
  public skip = 0;
}

在 kendo 网格 angular 的顶部和底部显示分页和记录计数 2+

Show pagination and records count on both top and bottom of kendo grid angular 2+

angular8