Set global culture for grid component

[Christophe]

I would like change the culture of my grid component but I don't know how to do this.

I try to follow this example but it doesn't work -_-

Kendo example :

https://www.telerik.com/kendo-vue-ui/components/grid/globalization/

The the format number don't work ... The number disappear...

My try :

 

How can I change the culture into the grid component ? :-)

[Petar]

Hello, Christophe.

To achieve what you need, we need to use the IntlProvider and LocalizationProvider packages. To use these packages we need the following imports and loads:

import {
  IntlProvider,
  load,
  LocalizationProvider,
  loadMessages,
} from '@progress/kendo-vue-intl';
import { filterBy } from '@progress/kendo-data-query';
import { sampleProducts } from './products';
import { frComponentMessages, frCustomMessages } from './fr';

import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import weekData from 'cldr-core/supplemental/weekData.json';

import frNumbers from 'cldr-numbers-full/main/fr/numbers.json';
import frCaGregorian from 'cldr-dates-full/main/fr/ca-gregorian.json';
import frDateFields from 'cldr-dates-full/main/fr/dateFields.json';
import frTimeZoneNames from 'cldr-dates-full/main/fr/timeZoneNames.json';
import frCurrencies from 'cldr-numbers-full/main/fr/currencies.json';

loadMessages(frCustomMessages, 'fr-FR');
loadMessages(frComponentMessages, 'fr-FR');

load(
  likelySubtags,
  currencyData,
  weekData,
  frNumbers,
  frCaGregorian,
  frDateFields,
  frTimeZoneNames,
  frCurrencies
);

Having the above, inside the template we should have the following definition:

  <localization :language="lang">
    <intl :locale="lang === 'fr-FR' ? 'fr' : 'en'">
      <Grid
        :style="{ height: '450px' }"
        :data-items="products"
        :filterable="radioGroupValue === 'row'"
        :filter="filter"
        @filterchange="filterChange"
        :columns="columns"
        :loader="loader"
      >
      </Grid>
    </intl>
  </localization>

Here is an example demonstrating how we can handle Globalization changes in the Native Grid component.

To summarize the above, the LocalizationProvider package is responsible for the messages inside the Kendo UI for Vue components and the IntlProvider package controls all formattings. Also, you can check our general Internationalization and Localization articles. 

Please check the above example and let me know if you have questions about the suggested implemenation. 

Looking forward to your reply.

Regards,
Petar
Progress Telerik

[Christophe]

Thank you very much Petar :-)

This example helped me a lot !

In my situation, I only needed to change currency format so with a cleaning of "unnecessary" code I understood how it works ;-)

<template>
  <intl :locale="lang === 'fr-FR' ? 'fr' : 'en'">
    <DropDownList
      :data-items="['fr-FR', 'en-EN']"
      :value="lang"
      @change="onLangChange"
    ></DropDownList>
    <Grid
      :style="{ height: '450px' }"
      :data-items="products"
      :columns="columns"
    ></Grid>
  </intl>
</template>

<script>

// kendo component import
import { Grid } from '@progress/kendo-vue-grid';
import { DropDownList } from '@progress/kendo-vue-dropdowns';
import {
  IntlProvider,
  load,
} from '@progress/kendo-vue-intl';

// data import
import { sampleProducts } from './products';

// cldr import
import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';

import frNumbers from 'cldr-numbers-full/main/fr/numbers.json';
import frCurrencies from 'cldr-numbers-full/main/fr/currencies.json';

load(
  likelySubtags,
  currencyData,
  frNumbers,
  frCurrencies
);

export default {
  components: {
    Grid,
    DropDownList,
    intl: IntlProvider,
  },
  data: function () {
    return {
      lang: 'fr-FR',
    };
  },
  computed: {
    products: function () {
      return sampleProducts
    },
    columns: function () {
      return [
        {
          field: 'UnitPrice',
          format: '{0:c2}',
          title: "Unit Price",
        },
      ];
    },
  },
  methods: {
    onLangChange(e) {
      this.lang = e.value;
    },
  },
};
</script>

[Petar]

You are welcome, Christophe!

Thank you for sharing with the community the final solution that you used. Your code will surely help someone in the future.