Hello,
I am trying to localize the following snippet of code.
The problem is that label only accepts strings and throws an error, hence the localization does not work, some help would be appreciated.
Kind regards
Daniela
1 Answer, 1 is accepted
Hi, Daniela,
Thank you for reaching out to us.
A possible solution would be to wrap the components that need to be localized inside of LocalizationProvider and IntlProvider, as shown in the following example:
More information on localization can be found in the following article:
https://www.telerik.com/kendo-react-ui/components/intl/l10n/
In case this is not enough for you to transfer to the real app, can you provide a working example that reproduces the issue so that I can assist further?
I hope this helps.
Regards,
FilipProgress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
I cannot wrap it in LocalizationProvider because it is not JSX code, I have updated your example with my code,
https://stackblitz.com/edit/react-wfgwwk-rscl27?file=app/main.jsx
The entire error is:
Type '{ localizationService: LocalizationService; "": any; }' is not assignable to type 'string'.ts(2322)
AddCompData.tsx(92, 5): The expected type comes from property 'label' which is declared here on type 'stepsInterface'
Hello, Daniela,
Thank you for the provided example. It seems that the reason for this error is the invalid syntax used on line 38 for the label.
A possible solution is to use localizationService.toLanguageString() in the markup, as shown in this example:
https://stackblitz.com/edit/react-avihh3-gf9pid?file=app/main.jsx
I hope this helps.
Hello,
I still cannot make it work. I fixed the syntax error and now when I change language it just does not change to spanish or swedish it always stays in english. my updated code is below
https://stackblitz.com/edit/react-wfgwwk-rscl27?file=app%2Fmain.jsx
The important part is that the stepper labels are outside the render , hence they are not wrapped inside the IntlProvider, some help would be appreciated.
Kind regards,
Hello, Daniela,
I opened the provided example, however, the code did not run, it is always stuck on loading. Can you try setting it up again so that I can inspect it?
The localization we provide is for the built-in message inside the components, I checked the Stepper docs, and it seems that the only message that can be localized is the Optional Text:
https://www.telerik.com/kendo-react-ui/components/layout/globalization/#toc-messages
which means that localization of the labels is not supported.
More information on how to react to language change can be found in the following article:
https://www.telerik.com/kendo-react-ui/components/intl/l10n/reacting-to-language-changes/
I hope this helps.
Regards,Filip
Hello,
We are facing the same problem in the menu, we cannot localize the menu items, is it because that one does not support localization either?
In case that is true , is there a workaround you would suggest? because we really need to localize those.
Thanks,
Kind regards,
Hello, Daniela,
I inspected the Menu component, it seems that it lacks globalization messages as well. Currently, there is no workaround possible, however, I can suggest submitting a feature request in our feedback portal where new ideas are constantly being evaluated and the most popular ones are later included in future releases:
https://feedback.telerik.com/kendo-react-ui
I hope this helps.
Regards,Filip
Hi,
I was wondering if you had in telerik bundle another component that is a menu that supports languange translations ?
thanks.
In the current KendoReact set of components, the Menu is the only component with similar functionality to a Menu.
Regards,
Filip