Kendo Localization

2 Answers 159 Views
Localization
SysCo
Top achievements
Rank 1
Iron
Iron
SysCo asked on 30 Nov 2022, 09:03 AM

Hello,

I have a question, as I can't find the answer in the documentation. Can we use the LocalizationProvider to print localized custom string, in the same way we can do it with VueI18n plugin ? Or the Localization feature is only for the Kendo components ?

2 Answers, 1 is accepted

Sort by
0
Accepted
Plamen
Telerik team
answered on 06 Sep 2023, 06:57 AM

Hello,

I have inspected the scenario once again and it seems like the language/locale state is being changed before the actual resources for the new language are imported. They are imported a bit later and that is why on the next change the component already works correctly. I have created an example where if we import all the messages at once the change in the languages is done as expected - https://stackblitz.com/edit/vitejs-vite-dz6k4p?file=src%2Fplugins%2Fi18n.js.

If you want to load the separate language resources on each change you should make sure that they are already imported before you change the state of the locale/language.

Hope this information helps. If you have further questions please don't hesitate to contact us again.

Regards,
Plamen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources

SysCo
Top achievements
Rank 1
Iron
Iron
commented on 12 Sep 2023, 08:03 AM

Yes, thanks for looking into it :)

I adapted the plugin to load messages before actually changing the locale and it works well.
0
Petar
Telerik team
answered on 30 Nov 2022, 10:25 AM

Hello, SysCo.

The Globalization features available in the Kendo UI for Vue Native suit can be used to print localized custom strings. Here is a StackBlitz example demonstrating how we can format dates and numbers. 

An important thing to mention here is that you need to add the following inject definition to your project when using the provideIntlService. Otherwise, you will get a console warning. 

  inject: {
    kendoIntlService: { default: null },
  }

More details about the available formatting options you can find on the following links:

I hope the above details will help you achieve what you need in your project.

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

SysCo
Top achievements
Rank 1
Iron
Iron
commented on 30 Nov 2022, 01:59 PM

Hello Petar,

Thank you. Ok, but this is for date and number or string formatting. What if I want to translate a word ?

How to translate Thank you to another language when the user choose his language in the app ?

Regards,

Fabien/SYSCO

Petar
Telerik team
commented on 30 Nov 2022, 02:31 PM

Hello, Fabien. 

Here is a link to a documentation example that demonstrates how we can translate messages. I hope it will help you achieve what you need in your scenario. 

SysCo
Top achievements
Rank 1
Iron
Iron
commented on 29 Mar 2023, 09:00 AM

Hello Petar,

I'm trying to migrate from Vue-i18n to only kendo-intl packages but I'm a bit struggling. Is there a way to lazy load messages ? I try to setup a vue plugin with the kendo-intl packages so I can use a global property for the translation, but I'm not able to make it work (see the Stackblitz: https://stackblitz.com/edit/vitejs-vite-f63fqh).

Is it something doable with the Kendo Intl packages ? Or I need to load all the languages ?

Regards,

Fabien / SYSCO

Plamen
Telerik team
commented on 31 Mar 2023, 06:06 AM

Hey Fabien,

The provided Stackblitz threw an error at my side and couldn't test it. Meanwhile I created a sample project where is shown how to load some of the languages on a later moment for example on click of a button. We only need to get the needed json definitions and load the so that the components could use them internally. - https://stackblitz.com/edit/wn52lg?file=src%2Fmain.vue

Let me know if you need additional help.

SysCo
Top achievements
Rank 1
Iron
Iron
commented on 01 Sep 2023, 09:18 AM

Hey Plamen and Petar,

Locale seems to load correctly for my scheduler, as the format date is changing when I change language. But the messages are not (the buttons on the scheduler are not translated). You'll find a stackblitz working here: https://stackblitz.com/edit/vitejs-vite-yf1mg5

I've the localizationProvider and the IntlProvider wrapping the whole application and it seems to work fine for the Internationalization, but not for the Globalization (and the method loadMessages is called, but the component is not updated, even with a full reload). Any idea ?

Petar
Telerik team
commented on 05 Sep 2023, 08:05 AM

Hi, Fabien.

Thank you for the shared details and the runnable example. After testing the project and checking its implementation, here is what I can share:

1. When opening the project and switching between the values of the DropDownButton I get the following error when selecting the DE or IT value:

2. The second thing I noticed is that the structure of the messages passed to the following code is not what the Kendo UI for Vue components expects:

const kendoMessages = eval(`kendoMessages${locale.toUpperCase()}`);
loadMessages(kendoMessages, i18nLocale.locale); // Load Kendo components messages

The value of the kendoMessage variable has the following structure:

{
       scheduler: { 
             today: { source: "The text value"}
       }
}

While the structure of the above should be like this:

{
       scheduler: { 
             today: "The text value"
       }
}

More info on how the Scheduler's messages should be structured can be found on this link to its documentation.

Please check and fix the above-mentioned errors and the messages' structure and let me know if this resolves the reported issue. 

SysCo
Top achievements
Rank 1
Iron
Iron
commented on 05 Sep 2023, 11:18 AM | edited

  1. But if you choose DE and go back to FR and choose DE again, the error is not there anymore. Still, messages of the component are not translated.
  2. This is corrected, the structure is now correct, still, messages of the component are not translated.

I found the issue though, the LocalizationProvider and the IntlProvider needs the locale (fr-CH/de-CH/it-CH). With both components having the locale, it works (but in the scheduler example, the IntlProvider has the language, es, setup).

 

Tags
Localization
Asked by
SysCo
Top achievements
Rank 1
Iron
Iron
Answers by
Plamen
Telerik team
Petar
Telerik team
Share this question
or