• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

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

    <LocalizationProvider language={locale}>
    ...
    </LocalizationProvider>
  • 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
    );
    );

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

     <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
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.pagerTotalPages{0}
grid.pagerItemPerPageitems per page
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.filterSubmitButtonFilter
grid.filterAndLogicAnd
grid.filterOrLogicOr
grid.filterTitleFilter
grid.filterChooseOperatorChoose Operator
grid.filterSelectedItemsselected items
grid.filterAriaLabelFilter
grid.sortAscendingSort Ascending
grid.sortDescendingSort Descending
grid.sortAriaLabelSortable
grid.searchPlaceholderSearch
grid.noRecordsNo records available.
grid.filterCheckAllCheck All
grid.groupColumnGroup Column
grid.groupExpandExpand group
grid.groupCollapseCollapse Group
grid.groupPanelAriaLabelGroup panel
grid.gridAriaLabelTable
grid.ungroupColumnUngroup Column
grid.detailExpandExpand detail row
grid.detailCollapseCollapse detail row

Right-to-Left Support

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

Example
View Source
Change Theme: