Kendo Localization

[SysCo]

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 ?

[Plamen]

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

[SysCo]

Yes, thanks for looking into it :)

I adapted the plugin to load messages before actually changing the locale and it works well.

[Petar]

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:

• Date formatting
• General formatting
• Number formatting

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

Regards,
Petar
Progress Telerik

[SysCo]

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]

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]

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]

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]

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]

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]

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).