RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.telerik.com/kendo-react-ui/components/grid/globalization below:

React Data Grid Globalization - KendoReact

New to KendoReact? Learn 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.

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

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.
```
    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 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.pagerTotalPages {0} grid.pagerItemPerPage items per page 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.filterSubmitButton Filter grid.filterAndLogic And grid.filterOrLogic Or grid.filterTitle Filter grid.filterChooseOperator Choose Operator grid.filterSelectedItems selected items grid.filterAriaLabel Filter grid.sortAscending Sort Ascending grid.sortDescending Sort Descending grid.sortAriaLabel Sortable grid.searchPlaceholder Search grid.noRecords No records available. grid.filterCheckAll Check All grid.groupColumn Group Column grid.groupExpand Expand group grid.groupCollapse Collapse Group grid.groupPanelAriaLabel Group panel grid.gridAriaLabel Table grid.ungroupColumn Ungroup Column grid.detailExpand Expand detail row grid.detailCollapse Collapse detail row Right-to-Left Support

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