Kendo Grid, how to change pageable text in Angular(count of pages, items)?

user_12797163 0
Viewed 3635

enter image description here

Is it possible to change the text of the Kendo Grid paging area in Angular? I need to customize the Items.

kendo-ui-angular2 kendo-grid kendo-ui angular
1 Answers

Use the custom messages component, and bind the options to the output strings:

<kendo-grid [kendoGridBinding]="gridData" [pageSize]="1" [pageable]="true">
  <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>

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

Example stackblitz: https://stackblitz.com/edit/angular-ckwaam-g1dsj6

Documentation:

user_40561460
Related