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

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

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

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