New to KendoReactLearn about KendoReact Free.

Globalization

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

For more information on how globalization practices are implemented in KendoReact, refer to the overview article. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

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.
Change Theme
Theme
Loading ...

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

  1. Change Grid's built-in messages using the LocalizationProvider component and the 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
        <LocalizationProvider language={locale}>
        ...
        </LocalizationProvider>
  2. 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.

    js
        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
        );

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

jsx
     <IntlProvider locale={locale === 'es-ES' ? 'es' : 'en'}>
        .............
     </IntlProvider>

Internationalization

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

For more information, refer to:

Messages

The Grid supports the localization of its messages by utilizing the KendoReact Internationalization package.

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

Message KeyDefault Value
General Grid Messages
grid.gridAriaLabelTable
grid.noRecordsNo records available
grid.selectRowSelect Row
grid.gridRowReorderAriaLabelDrag row
Pager Messages
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.pagerTotalPages{0}
grid.pagerItemsPerPageitems per page
grid.pagerPageSizeAriaLabelPage size
Search Messages
grid.searchPlaceholderSearch
grid.searchboxPlaceholderSearch...
Column Menu Messages
grid.columnMenuColumn menu
grid.columnMenuColumnChooserSelectedItemsSelected items
grid.adaptiveColumnMenuChooserTitleColumns Chooser
grid.adaptiveColumnMenuChooserSubTitleSelected fields are visible
grid.filterApplyButtonApply
grid.filterSubmitButtonFilter
grid.filterResetButtonReset
grid.filterCheckAllCheck All
grid.filterSelectAllSelect All
grid.filterSelectedItemsselected items
grid.gridAdaptiveColumnMenuFilterTitleFilter by
grid.adaptiveColumnMenuCheckboxFilterTitleFilter by
Sorting Messages
grid.sortAscendingSort Ascending
grid.sortDescendingSort Descending
grid.sortAriaLabelSortable
grid.sortClearButtonClear sorting
grid.sortApplyButtonDone
Filter Messages
grid.filterTitleFilter
grid.filterAriaLabelFilter
grid.filterClearButtonClear
grid.filterChooseOperatorChoose Operator
grid.filterClearAllButtonClear all filters
Filter Operators
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.filterAndLogicAnd
grid.filterOrLogicOr
Grouping Messages
grid.groupPanelEmptyDrag a column header and drop it here to group by that column
grid.groupPanelAriaLabelGroup panel
grid.groupColumnGroup Column
grid.ungroupColumnUngroup Column
grid.groupExpandExpand group
grid.groupCollapseCollapse Group
grid.groupClearButtonClear grouping
grid.groupApplyButtonDone
Detail Row Messages
grid.detailExpandExpand detail row
grid.detailCollapseCollapse detail row
Toolbar Messages
grid.toolbarSortSort
grid.toolbarGroupGroup
grid.toolbarFilterFilter
grid.toolbarColumnsChooserColumns
grid.toolbarCheckboxFilterFilter
grid.adaptiveToolbarSortTitleSort by
grid.adaptiveToolbarGroupTitleGroup by
AI Assistant Messages
grid.toolbarAIAI Assistant
grid.toolbarAIApplyApply
grid.aIResponseDataOperation is successful. Data is: \n
grid.generatedWithAIGenerated with AI
Edit Dialog Messages
grid.editDialogTitleEdit Dialog
grid.editDialogSaveButtonTitleSave
grid.editDialogCancelButtonTitleCancel
Export Messages
grid.exportPDFExport PDF

Right-to-Left Support

The following example demonstrates how to utilize the RTL support for the Grid.

Change Theme
Theme
Loading ...