# Globalization

The globalization process combines the translation of component messages with adapting them to specific locales.

The following example demonstrates how to:

* Change the date format and month names to Spanish.
* Localize the built-in Grid messages.
* Localize the column header messages.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/globalization/source.txt)

The key points in the implementation of the above examples are as follows:

* Change Grid's built-in messages using the [LocalizationProvider](https://www.telerik.com/kendo-vue-ui-develop/components/intl/api/localizationproviderprops) component and the [loadMessages](https://www.telerik.com/kendo-vue-ui-develop/components/intl/api/loadmessages) function.

Using the `loadMessages` method as follows will assign the texts in the `esMessages` object to the '**es-ES**' language definition.

```jsx
    loadMessages(esMessages, 'es-ES');
```

Having the above, by changing between the `es-ES` and the default `es-EN` languages(the language prop of the LocalizationProvider), we can switch the built-in messages of the Grid.

```jsx
    <localization :language="spanish ? 'es-ES' : 'en-EN'">
            .................
    </localization>
```

* Change Grid's data formatting based on a specific country selection using the [IntlProvider](https://www.telerik.com/kendo-vue-ui-develop/components/intl/api/intlproviderprops) component and the [load](https://www.telerik.com/kendo-vue-ui-develop/components/intl/api/load) function.

Using the `load` function as follows will load the specific formatting for the Spanish language. You can notice that the **numbers**, **currencies**, **caGregorian**, **dateFields** and **timeZoneNames** are imported from file that has `es` in its URL. If we want to import the formatting configurations for French, for example, we need to update the URL from `es` to `fr`.

```jsx
    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 numbers from 'cldr-numbers-full/main/es/numbers.json';
    import currencies from 'cldr-numbers-full/main/es/currencies.json';
    import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
    import dateFields from 'cldr-dates-full/main/es/dateFields.json';
    import timeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';

    load(
        likelySubtags,
        currencyData,
        weekData,
        numbers,
        currencies,
        caGregorian,
        dateFields,
        timeZoneNames
    );
```

Having the above, by changing the `locale` prop of the `IntlProvider` component, we can switch between the loaded formatting configurations.

```jsx
    <intl :locale="spanish ? 'es' : 'en'">
        .............
    </intl>
```

* Change Grid's header messaged using computed properties passed to the title prop of each Grid column.

## Internationalization

The internationalization process applies specific culture formats to a web application.

For more information, refer to:

* [Kendo UI for Vue documentation on internationalization](https://www.telerik.com/kendo-vue-ui-develop/components/intl/internationalization)
* [kendo-intl (the base Internationalization package on GitHub)](https://github.com/telerik/kendo-intl)

## Messages

The following table lists the built-in message keys and their default values.

| Message Key                        | Default Value                                                   |
| :--------------------------------- | :-------------------------------------------------------------- |
| `grid.groupPanelEmpty`             | `Drag a column header and drop it here to group by that column` |
| `grid.pagerItemsPerPage`           | `items per page`                                                |
| `grid.pagerInfo`                   | `{0} - {1} of {2} items`                                        |
| `grid.pagerFirstPage`              | `Go to the first page`                                          |
| `grid.pagerPreviousPage`           | `Go to the previous page`                                       |
| `grid.pagerNextPage`               | `Go to the next page`                                           |
| `grid.pagerLastPage`               | `Go to the last page`                                           |
| `grid.pagerPage`                   | `Page`                                                          |
| `grid.pagerOf`                     | `of`                                                            |
| `grid.filterClearButton`           | `Clear`                                                         |
| `grid.filterEqOperator`            | `Is equal to`                                                   |
| `grid.filterNotEqOperator`         | `Is not equal to`                                               |
| `grid.filterIsNullOperator`        | `Is null`                                                       |
| `grid.filterIsNotNullOperator`     | `Is not null`                                                   |
| `grid.filterIsEmptyOperator`       | `Is empty`                                                      |
| `grid.filterIsNotEmptyOperator`    | `Is not empty`                                                  |
| `grid.filterStartsWithOperator`    | `Starts with`                                                   |
| `grid.filterContainsOperator`      | `Contains`                                                      |
| `grid.filterNotContainsOperator`   | `Does not contain`                                              |
| `grid.filterEndsWithOperator`      | `Ends with`                                                     |
| `grid.filterGteOperator`           | `Is greater than or equal to`                                   |
| `grid.filterGtOperator`            | `Is greater than`                                               |
| `grid.filterLteOperator`           | `Is less than or equal to`                                      |
| `grid.filterLtOperator`            | `Is less than`                                                  |
| `grid.filterIsTrue`                | `Is true`                                                       |
| `grid.filterIsFalse`               | `Is false`                                                      |
| `grid.filterBooleanAll`            | `(All)`                                                         |
| `grid.filterAfterOrEqualOperator`  | `Is after or equal to`                                          |
| `grid.filterAfterOperator`         | `Is after`                                                      |
| `grid.filterBeforeOperator`        | `Is before`                                                     |
| `grid.filterBeforeOrEqualOperator` | `Is before or equal to`                                         |
| `grid.noRecords`                   | `No records available.`                                         |

## Suggested Links

* [Globalization](https://www.telerik.com/kendo-vue-ui-develop/components/intl)
* [Internationalization](https://www.telerik.com/kendo-vue-ui-develop/components/intl/internationalization)
* [Localization](https://www.telerik.com/kendo-vue-ui-develop/components/intl/localization)
* [API Reference of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api)