Global localization in Angular TreeGrid component

4 Sep 202524 minutes to read

Localization

The Localization library allows customization of the default text content in the TreeGrid. The TreeGrid includes static text in various features, such as the toolbar, filter menus, and pager. These can be localized for different cultures (e.g., Arabic, Deutsch, French) by providing the appropriate locale value and translation object.

The following locale keywords are used in the TreeGrid:

Locale keyword 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 a translation object in an application, use the load function of the L10n class.

The following example demonstrates the TreeGrid localized to Deutsch culture.

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'



import { L10n } from '@syncfusion/ej2-base';
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-treegrid';


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

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule
    ],

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' locale='de-DE' #treegrid height='220' [allowPaging]='true' [allowExcelExport]='true' [pageSettings]='pager' [treeColumnIndex]='1' [allowFiltering]='true' [filterSettings]='filters'  childMapping='subtasks' [toolbar]='toolbarOptions'>
        <e-columns>
                    <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                    <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                    <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=120></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right' width=110></e-column>
        </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public pager?: Object;
    public toolbarOptions?: ToolbarItems[];
    public filters?: Object;
    ngOnInit(): void {
        this.data = sampleData;
        this.pager = {pageSize: 7};
        this.toolbarOptions = ['Print'];
        this.filters = { type: 'Menu' };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Localization of dependent components in TreeGrid

When localizing the TreeGrid, include dependent components such as DatePicker, Form Validator, and Grid, as these also contain static text that requires translation. To localize these components:

  1. DatePicker: Localize placeholders and button text using DatePicker localization keys.

    Example keys for date picker localization:

     "datepicker": {
     "placeholder": "Wählen Sie ein Datum",
     "today": "heute"
 }

  2. Form Validator: Localize validation messages using Form Validator localization keys.

    Example keys for form validation localization:

     "formValidator":{
     "required": "This field is required",
     "email": "Please enter a valid email address",
     "minLength": "Please enter at least {0} characters"
 }

  3. Grid: For TreeGrid-related keywords, use Grid localization keys.

    Example keys for grid localization:

     "grid" :{
     "True": "true",
     "False": "false",
     "Item": "item",
     "Items": "items",
     "OKButton": "OK"
 }

Below is an example showing how to load localization keys for TreeGrid and its dependencies using the load function of the L10n class, and updating the locale property of TreeGrid with the culture name:

L10n.load({
    'de-DE': {
        "datepicker": {
            "placeholder": "Wählen Sie ein Datum",
            "today": "heute"
        },
        "formValidator":{
            "required": "This field is required",
            "email": "Please enter a valid email address",
            "minLength": "Please enter at least {0} characters"
        },
        "grid": {
            "True": "true",
            "False": "false",
            "Item": "item",
            "Items": "items",
            "OKButton": "OK"
        }
    }
});

Internationalization

The Internationalization library is used to globalize numbers, dates, and time values in the TreeGrid using format strings in columns.format.

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'




import { loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import { formatData } from './datasource';
import { L10n } from '@syncfusion/ej2-base';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ToolbarItems } from '@syncfusion/ej2-treegrid';

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

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule
    ],

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' locale='de-DE' #treegrid height='220' [allowPaging]='true' [allowExcelExport]='true' [pageSettings]='pager' [treeColumnIndex]='1' [allowFiltering]='true' [filterSettings]='filters'  childMapping='subtasks' [toolbar]='toolbarOptions'>
        <e-columns>
            <e-column field='orderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='orderName' headerText='Order Name' textAlign='Left' width=180></e-column>
            <e-column field='price' headerText='Price' textAlign='Right' type='number' [format]='formats' width=120></e-column>
        </e-columns>
                </ejs-treegrid>`
})


export class AppComponent implements OnInit {

    public data?: Object[];
    public pager?: Object;
    public toolbarOptions?: ToolbarItems[];
    public filters?: Object;
    public formats?: Object;


    ngOnInit(): void {
        setCulture('de');
        setCurrencyCode('EUR');
        this.data = formatData;
        this.pager = {pageSize: 7};
        this.toolbarOptions = ['Print'];
        this.filters = { type: 'Menu' };
        loadCldr('./currencies.json',
        './numbers.json',
        './ca-gregorian.json',
        './timeZoneNames.json',
        './numberingSystems.json');
        this.formats = {
                format: 'C2', useGrouping: false,
                minimumSignificantDigits: 1, maximumSignificantDigits: 3, currency: 'EUR'
            };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

In the above sample, the Price column is formatted using NumberFormatOptions.
By default, the locale value is en-US. To use another culture, update the locale property accordingly.

Right to left (RTL)

RTL support allows the TreeGrid’s text direction and layout to switch from left to right. This improves accessibility and the user experience for right-to-left languages (such as Arabic, Farsi, and Urdu). To enable RTL in TreeGrid, set the enableRtl property to true.

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'



import { L10n } from '@syncfusion/ej2-base';
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
import { Filter } from '@syncfusion/ej2-angular-treegrid';


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

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule
    ],

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' [enableRtl]='true' locale='ar-AE' #treegrid height='220' [allowPaging]='true' [allowExcelExport]='true' [pageSettings]='pager' [treeColumnIndex]='1' [allowFiltering]='true' [filterSettings]='filters' childMapping='subtasks' [toolbar]='toolbarOptions'>
        <e-columns>
            <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
            <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
            <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=120></e-column>
            <e-column field='duration' headerText='Duration' textAlign='Right' width=110></e-column>
        </e-columns>
     </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public pager?: Object;
    public toolbarOptions?: ToolbarItems[];
    public filters?: Filter | any;

    ngOnInit(): void {
        this.data = sampleData;
        this.pager = {pageSize: 7};
        this.toolbarOptions = ['Print'];
        this.filters = { type: 'Menu' };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also

To discover more features, see the Angular TreeGrid feature tour. Explore the Angular TreeGrid example for usage and data manipulation.