Custom pager info

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

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