Global local in React Treegrid component

16 Sep 202324 minutes to read

Localization

The Localization library allows you to localize default text content of the TreeGrid. The treegrid component has static text on some features (like toolbar area text, filter menu text, pager information text, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the
locale value and translation object.

The following list of properties and its values are used in the treegrid.

Locale keywords Text
EmptyRecord No records to display
True true
False false
ExpandAll Expand All
CollapseAll Collapse All
RowIndent Indent
RowOutdent Outdent
InvalidFilterMessage Invalid Filter Data
FilterbarTitle \s filter bar cell
Add Add
Edit Edit
Cancel Cancel
Update Update
Delete Delete
Print Print
Pdfexport PDF Export
Excelexport Excel Export
Wordexport Word Export
Csvexport CSV Export
Search Search
Save Save
EditOperationAlert No records selected for edit operation
DeleteOperationAlert No records selected for delete operation
SaveButton Save
OKButton OK
CancelButton Cancel
EditFormTitle Details of
AddFormTitle Add New Record
ConfirmDelete Are you sure you want to Delete Record?
SearchColumns search columns
Matchs No Matches Found
FilterButton Filter
ClearButton Clear
StartsWith Starts With
EndsWith Ends With
Contains Contains
Equal Equal
NotEqual Not Equal
LessThan Less Than
LessThanOrEqual Less Than Or Equal
GreaterThan Greater Than
GreaterThanOrEqual Greater Than Or Equal
ChooseDate Choose a Date
EnterValue Enter the value
autoFitAll Auto Fit all columns
autoFit Auto Fit this column
Export Export
FirstPage First Page
LastPage Last Page
PreviousPage Previous Page
NextPage Next Page
SortAscending Sort Ascending
SortDescending Sort Descending
EditRecord Edit Record
DeleteRecord Delete Record
Above Above
Below Below
AddRow Add Row
FilterMenu Filter
SelectAll Select All
Blanks Blanks
FilterTrue True
FilterFalse False
NoResult No Matches Found
ClearFilter Clear Filter
NumberFilter Number Filters
TextFilter Text Filters
DateFilter Date Filters
MatchCase Match Case
Between Between
CustomFilter Custom Filter
CustomFilterPlaceHolder Enter the value
CustomFilterDatePlaceHolder Choose a date
AND AND
OR OR
ShowRowsWhere Show rows where:
currentPageInfo {0} of {1} pages
totalItemsInfo ({0} items)
firstPageTooltip Go to first page
lastPageTooltip Go to last page
nextPageTooltip Go to next page
previousPageTooltip Go to previous page
nextPagerTooltip Go to next pager
previousPagerTooltip Go to previous pager
pagerDropDown Items per page
pagerAllDropDown Items
All All

Loading translations

To load translation object in an application, use load function of the L10n class.

The following example demonstrates the TreeGrid in Deutsch culture.

import { L10n } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
L10n.load({
    'de-DE': {
        'pager': {
            'currentPageInfo': '{0} von {1} Seiten',
            'firstPageTooltip': 'Zur ersten Seite',
            'lastPageTooltip': 'Zur letzten Seite',
            'nextPageTooltip': 'Zur nächsten Seite',
            'nextPagerTooltip': 'Zum nächsten Pager',
            'previousPageTooltip': 'Zurück zur letzten Seit',
            'previousPagerTooltip': 'Zum vorherigen Pager',
            'totalItemsInfo': '({0} Beiträge)'
        },
        'treegrid': {
            "ClearButton": "klar",
            'Collapse All': 'Alles einklappen',
            "Contains": "Enthält",
            'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
            "EndsWith": "Endet mit",
            "EnterValue": "Geben Sie den Wert ein",
            "Equal": "Gleich",
            "Excelexport": "Excel-Export",
            'Expand All': 'Alle erweitern',
            "FilterButton": "Filter",
            "FilterMenu": "Filter",
            "GreaterThan": "Größer als",
            "GreaterThanOrEqual": "Größer als oder gleich",
            "LessThan": "Weniger als",
            "LessThanOrEqual": "Weniger als oder gleich",
            "NotEqual": "Nicht gleich",
            "Pdfexport": "PDF-Export",
            "Print": "Drucken",
            "StartsWith": "Beginnt mit",
            "Wordexport": "Word-Export"
        }
    }
});
function App() {
    const FilterOptions = {
        type: 'Menu'
    };
    const pageSettings = { pageSize: 7 };
    const toolbarOptions = ['Print'];
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} pageSettings={pageSettings} locale='de-DE' allowFiltering={true} filterSettings={FilterOptions} toolbar={toolbarOptions} height='220'>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Page, Toolbar, Filter]}/>
    </TreeGridComponent>;
}
;
export default App;
import { L10n } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, FilterSettingsModel, Inject, PageSettingsModel, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

L10n.load({
    'de-DE': {
        'pager': {
            'currentPageInfo': '{0} von {1} Seiten',
            'firstPageTooltip': 'Zur ersten Seite',
            'lastPageTooltip': 'Zur letzten Seite',
            'nextPageTooltip': 'Zur nächsten Seite',
            'nextPagerTooltip': 'Zum nächsten Pager',
            'previousPageTooltip': 'Zurück zur letzten Seit',
            'previousPagerTooltip': 'Zum vorherigen Pager',
            'totalItemsInfo': '({0} Beiträge)'
        },
        'treegrid': {
            "ClearButton": "klar",
            'Collapse All': 'Alles einklappen',
            "Contains": "Enthält",
            'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
            "EndsWith": "Endet mit",
            "EnterValue": "Geben Sie den Wert ein",
            "Equal": "Gleich",
            "Excelexport": "Excel-Export",
            'Expand All': 'Alle erweitern',
            "FilterButton": "Filter",
            "FilterMenu": "Filter",
            "GreaterThan": "Größer als",
            "GreaterThanOrEqual": "Größer als oder gleich",
            "LessThan": "Weniger als",
            "LessThanOrEqual": "Weniger als oder gleich",
            "NotEqual": "Nicht gleich",
            "Pdfexport": "PDF-Export",
            "Print": "Drucken",
            "StartsWith": "Beginnt mit",
            "Wordexport": "Word-Export"
        }
    }
});

function App() {

    const FilterOptions: FilterSettingsModel = {
        type: 'Menu'
    };
    const pageSettings: PageSettingsModel = { pageSize: 7 };
    const toolbarOptions: ToolbarItems[] = ['Print'];

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
        allowPaging={true} pageSettings={pageSettings} locale='de-DE' allowFiltering={true}
        filterSettings={FilterOptions} toolbar={toolbarOptions} height='220'>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Page, Toolbar, Filter]}/>
    </TreeGridComponent>
};
export default App;

Internationalization

The Internationalization library is used to globalize number, date, and time values in treegrid component using format strings in the columns.format.

import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import * as cagregorian from './ca-gregorian.json';
import * as currencies from './currencies.json';
import { formatData } from './datasource';
import * as numberingSystems from './numberingSystems.json';
import * as numbers from './numbers.json';
import * as timeZoneNames from './timeZoneNames.json';
loadCldr(currencies, cagregorian, numbers, timeZoneNames, numberingSystems);
setCulture('de');
setCurrencyCode('EUR');
L10n.load({
    'de-DE': {
        'pager': {
            'currentPageInfo': '{0} von {1} Seiten',
            'firstPageTooltip': 'Zur ersten Seite',
            'lastPageTooltip': 'Zur letzten Seite',
            'nextPageTooltip': 'Zur nächsten Seite',
            'nextPagerTooltip': 'Zum nächsten Pager',
            'previousPageTooltip': 'Zurück zur letzten Seit',
            'previousPagerTooltip': 'Zum vorherigen Pager',
            'totalItemsInfo': '({0} Beiträge)'
        },
        'treegrid': {
            "ClearButton": "klar",
            'Collapse All': 'Alles einklappen',
            "Contains": "Enthält",
            'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
            "EndsWith": "Endet mit",
            "EnterValue": "Geben Sie den Wert ein",
            "Equal": "Gleich",
            "Excelexport": "Excel-Export",
            'Expand All': 'Alle erweitern',
            "FilterButton": "Filter",
            "FilterMenu": "Filter",
            "GreaterThan": "Größer als",
            "GreaterThanOrEqual": "Größer als oder gleich",
            "LessThan": "Weniger als",
            "LessThanOrEqual": "Weniger als oder gleich",
            "NotEqual": "Nicht gleich",
            "Pdfexport": "PDF-Export",
            "Print": "Drucken",
            "StartsWith": "Beginnt mit",
            "Wordexport": "Word-Export"
        }
    }
});
function App() {
    const FilterOptions = {
        type: 'Menu'
    };
    const pageSettings = { pageSize: 7 };
    const toolbarOptions = ['Print'];
    const formatOption = {
        currency: 'EUR',
        format: 'C2',
        maximumSignificantDigits: 3,
        minimumSignificantDigits: 1,
        useGrouping: false
    };
    return <TreeGridComponent dataSource={formatData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} pageSettings={pageSettings} locale='de-DE' allowFiltering={true} filterSettings={FilterOptions} toolbar={toolbarOptions} height='220'>
        <ColumnsDirective>
            <ColumnDirective field='orderID' headerText='Order ID' width='90' textAlign='Right'/>
            <ColumnDirective field='orderName' headerText='Order Name' width='180'/>
            <ColumnDirective field='price' headerText='Price' width='80' format={formatOption} textAlign='Right' type='number'/>
        </ColumnsDirective>
        <Inject services={[Page, Filter, Toolbar]}/>
    </TreeGridComponent>;
}
;
export default App;
import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, FilterSettingsModel, Inject, PageSettingsModel, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import * as cagregorian from './ca-gregorian.json';
import * as currencies from './currencies.json';
import { formatData } from './datasource';
import * as numberingSystems from './numberingSystems.json';
import * as numbers from './numbers.json';
import * as timeZoneNames from './timeZoneNames.json';

loadCldr(currencies, cagregorian, numbers, timeZoneNames, numberingSystems);

setCulture('de');
setCurrencyCode('EUR');

L10n.load({
    'de-DE': {
        'pager': {
            'currentPageInfo': '{0} von {1} Seiten',
            'firstPageTooltip': 'Zur ersten Seite',
            'lastPageTooltip': 'Zur letzten Seite',
            'nextPageTooltip': 'Zur nächsten Seite',
            'nextPagerTooltip': 'Zum nächsten Pager',
            'previousPageTooltip': 'Zurück zur letzten Seit',
            'previousPagerTooltip': 'Zum vorherigen Pager',
            'totalItemsInfo': '({0} Beiträge)'
        },
        'treegrid': {
            "ClearButton": "klar",
            'Collapse All': 'Alles einklappen',
            "Contains": "Enthält",
            'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
            "EndsWith": "Endet mit",
            "EnterValue": "Geben Sie den Wert ein",
            "Equal": "Gleich",
            "Excelexport": "Excel-Export",
            'Expand All': 'Alle erweitern',
            "FilterButton": "Filter",
            "FilterMenu": "Filter",
            "GreaterThan": "Größer als",
            "GreaterThanOrEqual": "Größer als oder gleich",
            "LessThan": "Weniger als",
            "LessThanOrEqual": "Weniger als oder gleich",
            "NotEqual": "Nicht gleich",
            "Pdfexport": "PDF-Export",
            "Print": "Drucken",
            "StartsWith": "Beginnt mit",
            "Wordexport": "Word-Export"
        }
    }
});

function App() {

    const FilterOptions: FilterSettingsModel = {
        type: 'Menu'
    };
    const pageSettings: PageSettingsModel = { pageSize: 7 };
    const toolbarOptions: ToolbarItems[] = ['Print'];

    const formatOption : object = {
        currency:'EUR',
        format:'C2',
        maximumSignificantDigits:3,
        minimumSignificantDigits:1,
        useGrouping: false
    };

    return <TreeGridComponent dataSource={formatData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} pageSettings={pageSettings} locale='de-DE' allowFiltering={true}
    filterSettings={FilterOptions} toolbar={toolbarOptions} height='220'>
        <ColumnsDirective>
            <ColumnDirective field='orderID' headerText='Order ID' width='90' textAlign='Right'/>
            <ColumnDirective field='orderName' headerText='Order Name' width='180'/>
            <ColumnDirective field='price' headerText='Price' width='80' format={formatOption} textAlign='Right' type='number' />
        </ColumnsDirective>
        <Inject services={[Page, Filter, Toolbar]}/>
    </TreeGridComponent>
};
export default App;

  • In the above sample, Price column is formatted by NumberFormatOptions.
  • By default, locale value is en-US. If you want to change the en-US culture to a different culture, you have to change the locale accordingly.

Right to left (RTL)

RTL provides an option to switch the text direction and layout of the TreeGrid component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable RTL Grid, set the enableRtl to true.

import { L10n } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
L10n.load({
    'ar-AE': {
        'pager': {
            'currentPageInfo': '{0} من {1} صفحة',
            'firstPageTooltip': 'انتقل إلى الصفحة الأولى',
            'lastPageTooltip': 'انتقل إلى الصفحة الأخيرة',
            'nextPageTooltip': 'انتقل إلى الصفحة التالية',
            'nextPagerTooltip': 'الذهاب إلى بيجر المقبل',
            'previousPageTooltip': 'انتقل إلى الصفحة السابقة',
            'previousPagerTooltip': 'الذهاب إلى بيجر السابقة',
            'totalItemsInfo': '({0} العناصر)'
        },
        'treegrid': {
            "ChooseDate": "اختر تاريخا",
            "ClearButton": "واضح",
            "Contains": "يحتوي على",
            "EmptyRecord": "لا سجلات لعرضها",
            "EndsWith": "ينتهي مع",
            "EnterValue": "أدخل القيمة",
            "Equal": "مساو",
            "FilterButton": "منقي",
            "FilterMenu": "منقي",
            "GreaterThan": "أكثر من",
            "GreaterThanOrEqual": "أكبر من أو يساوي",
            "LessThan": "أقل من",
            "LessThanOrEqual": "اصغر من او يساوي",
            "NotEqual": "غير متساوي",
            "Print": "طباعة",
            "StartsWith": "ابدا ب",
        }
    }
});
function App() {
    const FilterOptions = {
        type: 'Menu'
    };
    const pageSettings = { pageSize: 7 };
    const toolbarOptions = ['Print'];
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} pageSettings={pageSettings} locale='ar-AE' allowFiltering={true} filterSettings={FilterOptions} toolbar={toolbarOptions} enableRtl={true} height='220'>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='160'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Page, Toolbar, Filter]}/>
    </TreeGridComponent>;
}
;
export default App;
import { L10n } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Filter, FilterSettingsModel, Inject, PageSettingsModel, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

L10n.load({
    'ar-AE': {
        'pager': {
            'currentPageInfo': '{0} من {1} صفحة',
            'firstPageTooltip': 'انتقل إلى الصفحة الأولى',
            'lastPageTooltip': 'انتقل إلى الصفحة الأخيرة',
            'nextPageTooltip': 'انتقل إلى الصفحة التالية',
            'nextPagerTooltip': 'الذهاب إلى بيجر المقبل',
            'previousPageTooltip': 'انتقل إلى الصفحة السابقة',
            'previousPagerTooltip': 'الذهاب إلى بيجر السابقة',
            'totalItemsInfo': '({0} العناصر)'
        },
        'treegrid': {
            "ChooseDate": "اختر تاريخا",
            "ClearButton": "واضح",
            "Contains": "يحتوي على",
            "EmptyRecord": "لا سجلات لعرضها",
            "EndsWith": "ينتهي مع",
            "EnterValue": "أدخل القيمة",
            "Equal": "مساو",
            "FilterButton": "منقي",
            "FilterMenu": "منقي",
            "GreaterThan": "أكثر من",
            "GreaterThanOrEqual": "أكبر من أو يساوي",
            "LessThan": "أقل من",
            "LessThanOrEqual": "اصغر من او يساوي",
            "NotEqual": "غير متساوي",
            "Print": "طباعة",
            "StartsWith": "ابدا ب",
        }
    }
});

function App() {

    const FilterOptions: FilterSettingsModel = {
        type: 'Menu'
    };
    const pageSettings: PageSettingsModel = { pageSize: 7 };
    const toolbarOptions: ToolbarItems[] = ['Print'];

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
    allowPaging={true} pageSettings={pageSettings} locale='ar-AE' allowFiltering={true}
    filterSettings={FilterOptions} toolbar={toolbarOptions} enableRtl= {true} height='220'>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='160'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Page, Toolbar, Filter]}/>
    </TreeGridComponent>
};
export default App;

See Also

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our React Tree Grid example to knows how to present and manipulate data.