Question

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

Answer 1

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

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

<块引用>

'为了在Grid的顶部和底部显示Grid Pager，Toolbar和Pager模板可以一起使用，如下例所示：'

<块引用>

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

<块引用>

值得一提的是，所描述的自定义方法并未经过全面测试和支持。因此，可能需要进一步修改。

完整代码：

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

在剑道网格角度 2+

1 个答案: