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 use the Spanish date format and month names and how to localize the built-in messages of the KendoReact Data Grid.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { IntlProvider, load, LocalizationProvider, loadMessages } from '@progress/kendo-react-intl';

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

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

import { process } from '@progress/kendo-data-query';
import { sampleProducts } from './sample-products.jsx';

class App extends React.Component {
    constructor(props) {
        super(props);
        const dataState = { skip: 0, take: 7 };
        this.state = {
            dataResult: process(sampleProducts, dataState),
            dataState: dataState
        };
    }

    dataStateChange = (event) => {
        this.setState({
            dataResult: process(sampleProducts, event.data),
            dataState: event.data
        });
    }

    render() {
        return (
            <LocalizationProvider language="es-ES">
                <IntlProvider locale="es" >
                    <Grid
                        style={{ height: '420px' }}
                        sortable={true}
                        filterable={true}
                        groupable={true}
                        pageable={{ pageSizes: [ 5, 7, 10 ] }}

                        data={this.state.dataResult}
                        {...this.state.dataState}
                        onDataStateChange={this.dataStateChange}
                    >
                        <Column field="ProductID" title="ID" filterable={false} width="70px" />
                        <Column field="ProductName" title="Nombre del producto" />
                        <Column field="FirstOrderedOn" title="Primero ordenado en" filter="date" format="{0:D}" />
                        <Column field="UnitPrice" title="Precio unitario" filter="numeric" format="{0:c}" />
                    </Grid>
                </IntlProvider>
            </LocalizationProvider>
        );
    }
}

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

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.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.noRecordsNo records available.

Right-to-Left Support

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

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

import { process } from '@progress/kendo-data-query';
import { GridColumn, Grid } from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.PureComponent {
    state = {
        dataState: {}
    }

    render() {
        const result = process(products, this.state.dataState);
        return (
            <div dir="rtl" className="k-rtl">
                <Grid
                    style={{ height: '420px' }}
                    filterable
                    sortable
                    pageable
                    data={result.data}
                    total={result.total}
                    {...this.state.dataState}
                    onDataStateChange={(e) => {
                        this.setState({
                            dataState: e.data
                        });
                    }}
                >
                    <GridColumn field="ProductID" title="Product Id" filter="numeric" />
                    <GridColumn field="ProductName" title="Product Name" />
                    <GridColumn field="UnitsInStock" title="Units In Stock" filter="numeric" />
                </Grid>
            </div>
        );
    }
}

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