Loading Data

The Internationalization package enables you to load default and additional locale data.

KendoReact Server Components are in an experimental phase and are not intended for production use. APIs may change without introducing a breaking change. Please refer to the Umbrella GitHub issue for general feedback, bug reports, and more information.

Default Locale Data

The IntlProvider implementation supports basic operations in the en-US locale. Some operations, such as parsing and formatting of currencies other than USD, require you to load the full locale information.

Loading CLDR Data

When you parse and format dates and numbers for a locale that is different from the default en-US one, you have to load CLDR data:

The CLDR data is available in the following locations, split into functional groupings:

  1. Install the needed CLDR packages by running the following command:

    npm install --save cldr-core cldr-numbers-full cldr-dates-full
  2. Import and load the required files in your component from the following locations:

    • cldr-core/supplemental/LOCALE_FILE.json
    • cldr-PACKAGE_NAME/main/LOCALE_NAME/LOCALE_FILE.json

    You can also import the data from the cldr-data package at the cldr-data/main/LOCALE_NAME/LOCALE_FILE.json location.

  3. Import the load method from @progress/kendo-react-server-components so that the desired locales are provided and active for use.

import deNumbers from "cldr-numbers-full/main/de/numbers.json";
import deLocalCurrency from "cldr-numbers-full/main/de/currencies.json";
import deCaGregorian from "cldr-dates-full/main/de/ca-gregorian.json";
import deDateFields from "cldr-dates-full/main/de/dateFields.json";

import { load } from "@progress/kendo-react-server-components";

load(
  deNumbers,
  deLocalCurrency,
  deCaGregorian,
  deDateFields
)

The following examples demonstrates how to load the locale files in your component.

Example
View Source
Change Theme:

Additional Resources