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 localize the built-in messages of the Dropdowns.

import React from 'react';
import ReactDOM from 'react-dom';

import { AutoComplete, ComboBox, DropDownList, MultiSelect } from '@progress/kendo-react-dropdowns';
import { loadMessages, LocalizationProvider } from '@progress/kendo-react-intl';

import esMessages from './es.json';
loadMessages(esMessages, 'es');

class AppComponent extends React.Component {
    render() {
        return (
            <LocalizationProvider language="es" >
                <div className="example-wrapper">
                    <div className="col-xs-12 col-sm-6 example-col">
                        <p>AutoComplete</p>
                        <AutoComplete />
                    </div>
                    <div className="col-xs-12 col-sm-6 example-col">
                        <p>ComboBox</p>
                        <ComboBox data={[]} />
                    </div>
                    <div className="col-xs-12 col-sm-6 example-col">
                        <p>DropDownList</p>
                        <DropDownList data={[]}/>
                    </div>
                    <div className="col-xs-12 col-sm-6 example-col">
                        <p>MultiSelect</p>
                        <MultiSelect data={[]}/>
                    </div>
                </div>
            </LocalizationProvider>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

Internationalization

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

For more information, refer to:

Messages

The Dropdowns support the localization of their messages by utilizing the KendoReact Internationalization package.

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

Message KeyDefault Value
dropdowns.nodataNO DATA FOUND.
dropdowns.clearClear

Right-to-Left Support

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

import React from 'react';
import ReactDOM from 'react-dom';

import { AutoComplete, ComboBox, DropDownList, MultiSelect } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    sports = [ 'Baseball', 'Basketball', 'Football', 'Tennis', 'Volleyball' ];

    render() {
        return (
            <div className="example-wrapper" style={{ textAlign: 'right' }}>
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>AutoComplete</p>
                    <AutoComplete data={this.sports} placeholder="Your favorite sport" dir="rtl" />
                </div>
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>ComboBox</p>
                    <ComboBox data={this.sports} defaultValue="Basketball" dir="rtl" />
                </div>
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>DropDownList</p>
                    <DropDownList data={this.sports} defaultValue="Basketball" dir="rtl" />
                </div>
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>MultiSelect</p>
                    <MultiSelect data={this.sports} defaultValue={[ "Basketball" ]} dir="rtl" />
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);
 /