localization of label that only accepts strings not working

[Daniela]

Hello,

 

I am trying to localize the following snippet of code.

  const [steps, setSteps] = React.useState<Array<stepsInterface>>([

    { label: {localizationService.toLanguageString('custom.AddCompressor', '')}, isValid: undefined },

    { label: 'Add properties', isValid: undefined }

  ]);

 

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

 

 

[Filip]

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:

https://stackblitz.com/edit/react-wfgwwk-9ehkxg?file=app/main.jsx

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

[Daniela]

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'

[Filip]

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.

[Daniela]

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,

[Filip]

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

[Daniela]

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,

[Filip]

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

[Daniela]

Hi,

 

I was wondering if you had in telerik bundle another component that is a menu that supports languange translations ?

 

thanks.

[Filip]

Hi, Daniela,

In the current KendoReact set of components, the Menu is the only component with similar functionality to a Menu.

Regards,
Filip