localization of label that only accepts strings not working

1 Answer 103 Views
Localization
Daniela
Top achievements
Rank 1
Iron
Iron
Iron
Daniela asked on 25 May 2022, 02:04 PM

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

 

 

1 Answer, 1 is accepted

Sort by
0
Filip
Telerik team
answered on 26 May 2022, 12:28 PM

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

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.

Daniela
Top achievements
Rank 1
Iron
Iron
Iron
commented on 27 May 2022, 08:45 AM

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
Telerik team
commented on 31 May 2022, 06:43 AM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 31 May 2022, 09:05 AM

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
Telerik team
commented on 02 Jun 2022, 08:06 AM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 02 Jun 2022, 08:23 AM

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
Telerik team
commented on 06 Jun 2022, 07:48 AM

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
Top achievements
Rank 1
Iron
Iron
Iron
commented on 07 Jun 2022, 07:46 AM

Hi,

 

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

 

thanks.

Filip
Telerik team
commented on 08 Jun 2022, 02:00 PM

Hi, Daniela,

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

Regards,
Filip
Tags
Localization
Asked by
Daniela
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Filip
Telerik team
Share this question
or