Kendo Grid，如何更改 Angular 中的可分页文本（页数、项目数）？

Posted 2023-05-07

【中文标题】Kendo Grid，如何更改 Angular 中的可分页文本（页数、项目数）？

【英文标题】：Kendo Grid, how to change pageable text in Angular(count of pages, items)?

【发布时间】：2021-01-12 18:16:47

【问题描述】：

是否可以在 Angular 中更改 Kendo Grid 页面区域的文本？我需要自定义项目。

【参考方案1】：

使用自定义消息组件，并将选项绑定到输出字符串：

<kendo-grid [kendoGridBinding]="gridData" [pageSize]="1" [pageable]="true">
  <kendo-grid-column field="ProductID" title="ID" >
  </kendo-grid-column>
  <kendo-grid-column field="ProductName" title="Name" >
  </kendo-grid-column>
  <kendo-grid-column field="UnitPrice" title="Price"  format="0:c">
  </kendo-grid-column>

  <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
    <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
    <kendo-pager-numeric-buttons [buttonCount]="10"></kendo-pager-numeric-buttons>
    <kendo-pager-next-buttons></kendo-pager-next-buttons>
    <kendo-pager-info></kendo-pager-info>
    Current page:  currentPage 
  </ng-template>
  <kendo-grid-messages [pagerItemsPerPage]="'custom items per page text'" [pagerItems]="'custom items text'"
    [pagerOf]="'custom of text'" [pagerPage]="'custom Page text'">
  </kendo-grid-messages>
</kendo-grid>

https://www.telerik.com/kendo-angular-ui/components/grid/api/CustomMessagesComponent/

stackblitz 示例：https://stackblitz.com/edit/angular-ckwaam-g1dsj6

文档：

https://www.telerik.com/kendo-angular-ui/components/grid/globalization/#toc-messages https://www.telerik.com/kendo-angular-ui/components/globalization/localization/messages/