Angular8 在剑道网格角度2+的顶部和底部显示分页和记录计数；

我想在顶部和底部显示带有记录计数的分页。默认情况下，其显示在剑道网格的底部。

---

有人能告诉我如何显示顶部和底部吗？

是的，通过一些剑道网格模板的“黑客”操作，这是可能的

已向Telerik团队提交了一份与此相关的通知单：

'为了在网格的顶部和底部显示网格寻呼机，工具栏和寻呼机模板可以一起使用，如以下示例所示：'

值得一提的是，所描述的定制方法没有得到充分的测试和支持。因此，可能需要进一步修改

完整代码：

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

从“@angular/core”导入{组件，视图封装}；
从“/products”导入{products}”；
从“@progress/kendo angular grid”导入{GridDataResult，PageChangeEvent}”；
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
封装：视图封装。无，
风格：[
`
.k-grid-pager{
顺序：-1；
边框宽度：0 0 1px；
宽度：100%；
}
`
]
})
导出类AppComponent{
公共数据：任何[]=产品；
公共页面大小=10；
公共跳过=0；
}

我用过，但问题是当我在网格上做一些过滤时，剑道datapager是独立工作的。我没有同时使用

和

，但这里有一个工作示例-。。。你可能会受到启发。