New to Kendo UI for Vue? Start a free 30-day trial

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.
Example
View Source
Change Theme:

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

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

    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.

    <localization :language="spanish ? 'es-ES' : 'en-EN'">
            .................
    </localization>
  • Change Grid's data formatting based on a specific country selection using the IntlProvider component and the 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.

    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.

    <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:

Messages

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

Message KeyDefault Value
grid.groupPanelEmptyDrag a column header and drop it here to group by that column
grid.pagerItemsPerPageitems per page
grid.pagerInfo{0} - {1} of {2} items
grid.pagerFirstPageGo to the first page
grid.pagerPreviousPageGo to the previous page
grid.pagerNextPageGo to the next page
grid.pagerLastPageGo to the last page
grid.pagerPagePage
grid.pagerOfof
grid.filterClearButtonClear
grid.filterEqOperatorIs equal to
grid.filterNotEqOperatorIs not equal to
grid.filterIsNullOperatorIs null
grid.filterIsNotNullOperatorIs not null
grid.filterIsEmptyOperatorIs empty
grid.filterIsNotEmptyOperatorIs not empty
grid.filterStartsWithOperatorStarts with
grid.filterContainsOperatorContains
grid.filterNotContainsOperatorDoes not contain
grid.filterEndsWithOperatorEnds with
grid.filterGteOperatorIs greater than or equal to
grid.filterGtOperatorIs greater than
grid.filterLteOperatorIs less than or equal to
grid.filterLtOperatorIs less than
grid.filterIsTrueIs true
grid.filterIsFalseIs false
grid.filterBooleanAll(All)
grid.filterAfterOrEqualOperatorIs after or equal to
grid.filterAfterOperatorIs after
grid.filterBeforeOperatorIs before
grid.filterBeforeOrEqualOperatorIs before or equal to
grid.noRecordsNo records available.

In this article

Not finding the help you need?