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 KendoReact Pager and Filter components.

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Pager,
    Filter, Operators, TextFilter, NumericFilter, BooleanFilter, DateFilter
} from '@progress/kendo-react-data-tools';

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

import { products } from './products.js';

class App extends React.Component {
    state = {
        skip: 0,
        take: 5,
        filter: {
            logic :'and',
            filters: [
                { field: 'FirstOrderedOn', operator: 'lt', value: new Date(2010, 11, 2) }
            ]
        }
    };

    render() {
        return (
            <React.Fragment>
                <LocalizationProvider language="es">
                    <Pager
                        skip={this.state.skip}
                        take={this.state.take}
                        total={products.length}
                        buttonCount={5}
                        info={true}
                        type="numeric"
                        pageSizes={[5, 10, 20]}
                        previousNext={true}
                        onPageChange={this.handlePageChange}
                    />
                </LocalizationProvider>
                <br />
                <LocalizationProvider language="es">
                    <IntlProvider locale="es">
                        <Filter
                            fields={[
                                { name: "ProductName", label: 'Nombre', filter: TextFilter, operators: Operators.text },
                                { name: "UnitPrice", label: 'Precio', filter: NumericFilter, operators: Operators.numeric },
                                { name: "Discontinued", label: 'Interrumpido', filter: BooleanFilter, operators: Operators.boolean },
                                { name: "FirstOrderedOn", label: "Primero ordenado", filter: DateFilter, operators: Operators.date }
                            ]}
                            onChange={this.onFilterChange}
                            value={this.state.filter}
                        />
                    </IntlProvider>
                </LocalizationProvider>
            </React.Fragment>
        );
    }

    onFilterChange = event => {
        this.setState({ filter: event.filter });

        console.log(event.filter);
    }

    handlePageChange = event => {
        const { skip, take } = event;
        this.setState({ skip, take });

        console.log(`Page Change: skip ${skip}, take ${take}`);
        console.log('Current Products: ', products.slice(skip, skip + take));
    }
}

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 Pager and Filter components support 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
pager.itemsPerPageitems per page
pager.info{0} - {1} of {2} items
pager.firstPageGo to the first page
pager.previousPageGo to the previous page
pager.nextPageGo to the next page
pager.lastPageGo to the last page
pager.pagePage
pager.ofof
pager.totalPages{0}
filter.eqOperatorIs equal to
filter.notEqOperatorIs not equal to
filter.isNullOperatorIs null
filter.isNotNullOperatorIs not null
filter.isEmptyOperatorIs empty
filter.isNotEmptyOperatorIs not empty
filter.startsWithOperatorStarts with
filter.containsOperatorContains
filter.notContainsOperatorDoes not contain
filter.endsWithOperatorEnds with
filter.gteOperatorIs greater than or equal to
filter.gtOperatorIs greater than
filter.lteOperatorIs less than or equal to
filter.ltOperatorIs less than
filter.isTrueIs true
filter.isFalseIs false
filter.afterOrEqualOperatorIs after or equal to
filter.afterOperatorIs after
filter.beforeOperatorIs before
filter.beforeOrEqualOperatorIs before or equal to
filter.andLogicAnd
filter.orLogicOr
filter.addExpressionAdd Expression
filter.addGroupAdd Group
filter.closeClose

Right-to-Left Support

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Pager } from '@progress/kendo-react-data-tools';

class App extends React.Component {
    state = { skip: 0, take: 5 };

    render() {
        return (
            <Pager
                style={{ direction: 'rtl' }}
                skip={this.state.skip}
                take={this.state.take}
                total={200}
                onPageChange={this.handlePageChange}
                buttonCount={5}
                info={true}
                previousNext={true}
                type="numeric"
                pageSizes={[5, 10, 20]}
            />
        );
    }

    handlePageChange = event => {
        this.setState({ skip: event.skip, take: event.take });
    };
}

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