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 TreeList component.

import React from 'react';
import ReactDOM from 'react-dom';
import {
    TreeList, filterBy, extendDataItem, mapTree,
    TreeListTextFilter, TreeListDateFilter, TreeListNumericFilter, TreeListBooleanFilter
} from '@progress/kendo-react-treelist';
import { LocalizationProvider, loadMessages } from '@progress/kendo-react-intl';
import esMessages from './es.json';
import employees from './data';

loadMessages(esMessages, 'es-ES');

const subItemsField = 'employees';
const expandField = 'expanded';
const columns = [
    { field: 'name', title: 'Nombre', width: 320, filter: TreeListTextFilter, expandable: true },
    { field: 'hireDate', title: 'Fecha de contratación', width: 280, format: '{0:d}', filter: TreeListDateFilter },
    { field: 'timeInPosition', title: 'Año(s) en posición', width: 280, filter: TreeListNumericFilter },
    { field: 'fullTime', title: 'Tiempo completo', width: 190, filter: TreeListBooleanFilter }
];

class App extends React.Component {
    state = {
        data: [ ...employees ],
        filter: [],
        expanded: [1, 2, 32]
    }

    onExpandChange = (e) => {
        this.setState({
            expanded: e.value ?
                this.state.expanded.filter(id => id !== e.dataItem.id) :
                [ ...this.state.expanded, e.dataItem.id ]
        });
    }

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

    addExpandField = (dataTree) => {
        const expanded = this.state.expanded;
        return mapTree(dataTree, subItemsField, (item) =>
            extendDataItem(item, subItemsField, {
                [expandField]: expanded.includes(item.id)
            })
        );
    }

    processData = () => {
        let data = this.state.data;
        let filteredData = filterBy(data, this.state.filter, subItemsField)
        return this.addExpandField(filteredData);
    }

    render() {
        return (
            <LocalizationProvider language="es-ES">
                <TreeList
                    style={{ maxHeight: '510px', overflow: 'auto' }}
                    expandField={expandField}
                    subItemsField={subItemsField}
                    onExpandChange={this.onExpandChange}
                    filter={this.state.filter}
                    data={this.processData()}
                    onFilterChange={this.handleFilterChange}
                    columns={columns}
                />
            </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 TreeList 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
treelist.filterClearButtonClear
treelist.filterEqOperatorIs equal to
treelist.filterNotEqOperatorIs not equal to
treelist.filterIsNullOperatorIs null
treelist.filterIsNotNullOperatorIs not null
treelist.filterIsEmptyOperatorIs empty
treelist.filterIsNotEmptyOperatorIs not empty
treelist.filterStartsWithOperatorStarts with
treelist.filterContainsOperatorContains
treelist.filterNotContainsOperatorDoes not contain
treelist.filterEndsWithOperatorEnds with
treelist.filterGteOperatorIs greater than or equal to
treelist.filterGtOperatorIs greater than
treelist.filterLteOperatorIs less than or equal to
treelist.filterLtOperatorIs less than
treelist.filterIsTrueIs true
treelist.filterIsFalseIs false
treelist.filterBooleanAll(All)
treelist.filterAfterOrEqualOperatorIs after or equal to
treelist.filterAfterOperatorIs after
treelist.filterBeforeOperatorIs before
treelist.filterBeforeOrEqualOperatorIs before or equal to
treelist.noRecordsNo records available.
 /