kendo angular 5 - change culture dynamically

[papushe]

How can I change culture dynamically in kendo angular 5 app?

datePicker,
timePicker,
grid,
pager

from en (english):

to de (german) :

[cluetjen]

Just fyi: Afaik there's currently no "angular official" was to change culture dynamically. They are working on it: angular/angular#11405.

[ggkrustev]

Hi @papushe, we are working on a way to change dynamically locale (i18n settings) and it will be available soon. Basically, we will provide a way to change the locale id dynamically using IntlService. Stay tuned for updates.

As @cluetjen, mentioned there is no "official" way to change locales dynamically, hence we will provide our own way to do that.

[ggkrustev]

@papushe, @cluetjen
Actually, there is a develop version of the Input components that already show how the dynamic locale will work. Please check the following link:

https://www.telerik.com/kendo-angular-ui-develop/components/internationalization/locale-changes/

[papushe]

I'll check it out, and will update accordingly! tnx!

[ggkrustev]

The dynamic globalization is available in official releases of the Kendo UI for Angular. Here is a demo that demonstrates its usage with the DatePicker.

https://plnkr.co/edit/y0IGNn539crrjvYRLV3c?p=preview

I will close the thread as resolved.

[scacchif]

@ggkrustev does it change also the number formatting dynamically (i.e. numeric-textbox) or just the DatePicker? I tried to change it but it doesn't seems to work.

[ggkrustev]

@scacchif, I've modified the demo and it seems to work just fine - https://plnkr.co/edit/y0IGNn539crrjvYRLV3c?p=preview

[scacchif]

@ggkrustev thank you for the quick reply, in fact it works. In my application doesn't work because I use a different tipe of 'format' (i.e. '#.##' instead of 'n2').

[heapwalker]

Hi @ggkrustev, really thanks the work of your team in making the i18n feature more complete.
May I raise 2 more questions:

1. Reflect adopted language at lazy-loaded modules

At my project, I use angular 6 and latest versions of @progress/kendo-angular-* packages. By following your demo at https://plnkr.co/edit/y0IGNn539crrjvYRLV3c?p=preview, I can achieve the switch-language feature to date-picker successfully when both my language-switching-dropdown-menu and date-picker are at my root module.

However, my project also uses lazy-load module feature from angular. My language-switching dropdown menu is actually at my root module, while my date-picker (and some other kendo UIs which involves localization) will be put at lazy-loaded modules.
In such case I found that the texts on date-picker at lazy-loaded modules cannot refresh based on my chosen language from the language-switching-dropdown-menu (at root module).

FYI, I have tried these ways on importing kendo-modules to my own modules:
i) import IntlModule to only root module, and import DatePickerModule to only lazy-loaded module.
ii) import IntlModule to both root module and lazy-loaded module, and import DatePickerModule to only lazy-loaded module.
Both yield no luck in achieving language-changing at the datepicker at lazy-loaded module.

Would you please advise how I can achieve it?

2. Missing localization on word "TODAY"?? "culture" vs "text"??

Further, it seems the button "TODAY" on upper right corner of the calendar popup of date picker is missing localization support, isn't it? I tried switching to some other languages, but it seems the word "TODAY" is not changing. I even cannot find the word "today" from node_modules\@progress\kendo-angular-intl\locales\en\all.js.
I am thinking whether it is an intended behavior. Are your team intending to separate the "culture" (date + currency + number formatting) and "text" (e.g. the word "TODAY" on date-picker; the phrase "No records available." on grid; and "{a} - {b} of {n} items" on grid's pagination) into two aspects? And this post only deal with the "culture"? If such, would you also advise some code for us to change the language of these texts dynamically?

Thanks in advance for your help!

[danielkaradachki]

Hi,

The first problem will occur because the root and the child module will not have the same IntlService instance. Currently, all packages that depend on the @progress/kendo-angular-intl package provide the service so that this does not have to be done manually. To avoid using a separate instance I can suggest to explicitly provide the CldrIntlService in the root module and provide the IntlService in the child module with the useExisting option e.g.

//root module
providers: [ CldrIntlService, {
    provide: IntlService,
    useExisting: CldrIntlService
}}]

//child module
providers: [{
    provide: IntlService,
    useExisting: CldrIntlService
}]

I have created a sample that demonstrates this approach. We will consider exposing child modules that do not automatically provide the service or we will document this approach.

The component specific messages like today and noRecords are part of the component localization. The messages can be changed dynamically by using a custom message service as demonstrated here.

[heapwalker]

Hi @danielkaradachki,

Thank you very much for your kind help. With your demo and the linked documentation, I can now adopt appropriate culture and fully localize all the texts on Kendo UI components.

[vimalraj-a]

@danielkaradachki ,

Thanks for the fix. Wondering why kendo modules are creating own instance of IntlService in each module.
Screenshot of grid module:

Instead they can use providedIn: 'root' in IntlService class.

I have to copy paste the provider in all my sub modules wherever I am using Kendo modules.

[danielkaradachki]

Unfortunately we cannot use the providedIn option yet. It was introduced in Angular 6 and the Kendo packages are still compatible with Angular 4+.

[Xirkolumi]

@danielkaradachki is it possible to set up culture for numbers and dates independent of messages language?
when I set
(<CldrIntlService>this.intlService).localeId
it also changes language for messages displayed in kendo controls