CODEWITHSUNDEEP
angularkendo-uikendo-gridkendo-ui-angular2
Aruna Wijethunga
Aruna Wijethunga

Reputation: 43

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

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.

Upvotes: 2

Views: 5136

Answers (1)

xinthose
xinthose

Reputation: 3838

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:

Upvotes: 1

Related Questions