Custom pager info

[Ewald]

I want to customize the Pager, but from what I can see I will have to build the whole pager. I only wan to update the Pager info from "1 - 50 of 55 items" to just "55 items".

Is that posslbe?

[Vessy]

Hi, Ewald,

You can replace the pager info string with the desired one by localizing its default `pager.info` message:

• https://www.telerik.com/kendo-react-ui/components/datatools/globalization/ 

For convenience, I have created a sample demonstrating this approach here:

• https://stackblitz.com/edit/react-ap8ybk?file=app%2Fes.json,app%2Fmain.jsx 

Please, give it a try and let me know in case I can assist you any further on this matter.

Regards,
Vessy
Progress Telerik

[Ewald]

I got it to work, but it was not easy. The documentation is not great for localization.

The steps that I took were:

1. Install the NPM package @progress/kendo-react-intl

2. Add a json file in the same directory for each language that I want to support. 

The json that I used looks like

{
	"grid": {
		"pagerInfo": "{2} items"
	}
}

 

3. Add the following lines of code to my tsx file

import { LocalizationProvider, loadMessages } from'@progress/kendo-react-intl';

import enCustomMessages from'./locales/en.json';
loadMessages(enCustomMessages, 'en');
  

 

4. Surround the KendoGrid component with the LocalizationProvider component. Since I use i18next with browser language detection, I used their resolvedLanguage.

<LocalizationProvider language={i18n.resolvedLanguage || 'en'}>
<KendoGrid

[Vessy]

Thanks a lot for sharing the taken steps, Ewald!

The detailed information regarding the Globalization feature of all components can be found here (use the tree on the left to navigate through the nested sections):

• https://www.telerik.com/kendo-react-ui/components/intl/ 

It is linked in the previously provided article but we will think of a way to making it more obvious and easier to be found.

Regards,
Vessy

[Ewald]

I have been browsing those pages, but the information available there is very limited and not very helpful

[Vessy]

I see. Thanks again for the shared feedback, Ewald, we will think of a possible way to improve the section.