Kendo UI Grid View implementation using vue | pageable functionality issue

[Vinoth]

I'm trying to implement a Kendo grid for my Vue project and I was trying to show the pagination with items per page option with a custom message like "Rows per page"


we have a pageable option to show the custom message for these labels, but even after adding the custom text, I don't see the change in the UI. 

Here is my code : 

<Grid
      :id="tableId"
      :data-items="items"
      :resizable="resizable"
      :columns="displayedColumns"
      :pageable="pageable"
>
<Grid>

 computed: {
    pageable() {
      return {
        buttonCount: 5,
        info: true,
        type: 'numeric',
        pageSizes: [5, 10, 25, 50],
        previousNext: true,
        pageSizeValue: this.pageSizeValue,
        messages:{
          itemsPerPage: 'rows per page',
        }
      };
    },
 }

Am I missing something? Can someone please help?

Thanks.

[Petar]

Hello, Vinoth.

The messages of the Native Grid component can be edited using the Native Localization package.

More about the usage of the Globalization and Localization packages, in the context of the Native Grid, you can find in this Grid Globalization demo.

Talking specifically about the message that you want to change, here is a runnable StackBlitz example in which the requested functionality is demonstrated. In the en.json file you will see the following definition:

{
  "grid": {
    "pagerItemsPerPage": "rows per page"
  }
}

Then, in the main.vue file we have the following that loads the defined message:

import enMessages from './en.json';
loadMessages(enMessages, 'en-EN');

All messages that can e changed in the Grid are listed in the linked above Grid Globalization demo. When there is no specific definition for a given message, the Grid shows the default message value.

Please check the above example and let me know if you have questions about the suggested implementation.

Regards,
Petar
Progress Telerik