Global local in EJ2 TypeScript Grid control
13 Apr 202324 minutes to read
Localization
The Localization
library allows you to localize default text content of the Grid. The grid component has static text on some features (like group drop area 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 grid.
Locale keywords | Text |
---|---|
EmptyRecord | No records to display |
True | true |
False | false |
InvalidFilterMessage | Invalid Filter Data |
GroupDropArea | Drag a column header here to group its column |
UnGroup | Click here to ungroup |
GroupDisable | Grouping is disabled for this column |
FilterbarTitle | \s filter bar cell |
EmptyDataSourceError | DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid |
Add | Add |
Edit | Edit |
Cancel | Cancel |
Update | Update |
Delete | Delete |
Pdfexport | PDF Export |
Excelexport | Excel Export |
Wordexport | Word Export |
Csvexport | CSV Export |
Search | Search |
Columnchooser | Columns |
Save | Save |
Item | item |
Items | items |
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 |
BatchSaveConfirm | Are you sure you want to save changes? |
BatchSaveLostChanges | Unsaved changes will be lost. Are you sure you want to continue? |
ConfirmDelete | Are you sure you want to Delete Record? |
CancelEdit | Are you sure you want to Cancel the changes? |
ChooseColumns | Choose Column |
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 |
Copy | Copy |
Group | Group by this column |
Ungroup | Ungroup by this column |
autoFitAll | AutoFit all columns |
autoFit | AutoFit 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 |
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) |
totalItemInfo | ({0} item) |
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 items |
previousPagerTooltip | Go to previous pager items |
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 Grid in Deutsch
culture.
import { L10n } from '@syncfusion/ej2-base';
import { Grid, Group, Page } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Group, Page);
L10n.load({
'de-DE': {
'grid': {
'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
'GroupDropArea': 'Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte',
'UnGroup': 'Klicken Sie hier, um die Gruppierung aufheben',
'EmptyDataSourceError': 'DataSource darf bei der Erstauslastung nicht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster',
'Item': 'Artikel',
'Items': 'Artikel'
},
'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': 'Gehen Sie zu den nächsten Pager-Elementen',
'previousPagerTooltip': 'Gehen Sie zu vorherigen Pager-Elementen'
}
}
});
let grid: Grid = new Grid({
dataSource: data,
locale: 'de-DE',
allowGrouping: true,
allowPaging: true,
pageSettings: { pageSize: 6 },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
height: 210
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-notifications/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
.empImage {
margin: 6px 16px;
float: left;
width: 50px;
height: 50px;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
Internationalization
The Internationalization
library is used to globalize number, date, and time values in grid component using format strings in the columns.format
.
import { loadCldr, L10n, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import * as currencies from './currencies.json';
import * as cagregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';
import * as timeZoneNames from './timeZoneNames.json';
import * as numberingSystems from './numberingSystems.json';
import { Grid, Group, Page } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Group, Page);
loadCldr(currencies, cagregorian, numbers, timeZoneNames, numberingSystems);
setCulture('de');
setCurrencyCode('EUR');
L10n.load({
'de-DE': {
'grid': {
'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
'GroupDropArea': 'Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte',
'UnGroup': 'Klicken Sie hier, um die Gruppierung aufheben',
'EmptyDataSourceError': 'DataSource darf bei der Erstauslastung nicht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster',
'Item': 'Artikel',
'Items': 'Artikel'
},
'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': 'Gehen Sie zu den nächsten Pager-Elementen',
'previousPagerTooltip': 'Gehen Sie zu vorherigen Pager-Elementen'
}
}
});
let grid: Grid = new Grid({
dataSource: data,
locale: 'de-DE',
allowGrouping: true,
allowPaging: true,
pageSettings: { pageSize: 6 },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{
field: 'Freight', headerText: 'Freight', width: 150, format: {
format: 'C2', useGrouping: false,
minimumSignificantDigits: 1, maximumSignificantDigits: 3, currency: 'EUR'
}, textAlign: 'Right'
},
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
height: 220
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-notifications/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
.empImage {
margin: 6px 16px;
float: left;
width: 50px;
height: 50px;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>
Right to left (RTL)
RTL provides an option to switch the text direction and layout of the Grid 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 { Grid, Page } from '@syncfusion/ej2-grids';
import { data } from './datasource.ts';
Grid.Inject(Page);
L10n.load({
'ar-AE': {
'grid': {
'EmptyRecord': 'لا سجلات لعرضها',
'EmptyDataSourceError': 'يجب أن يكون مصدر البيانات فارغة في التحميل الأولي منذ يتم إنشاء الأعمدة من مصدر البيانات في أوتوجينيراتد عمود الشبكة'
},
'pager': {
'currentPageInfo': '{0} من {1} صفحة',
'totalItemsInfo': '({0} العناصر)',
'firstPageTooltip': 'انتقل إلى الصفحة الأولى',
'lastPageTooltip': 'انتقل إلى الصفحة الأخيرة',
'nextPageTooltip': 'انتقل إلى الصفحة التالية',
'previousPageTooltip': 'انتقل إلى الصفحة السابقة',
'nextPagerTooltip': 'انتقل إلى عناصر بيجر التالية',
'previousPagerTooltip': 'للذهاب إلى عناصر بيجر السابقة'
}
}
});
let grid: Grid = new Grid({
dataSource: data,
enableRtl: true,
locale: 'ar-AE',
allowPaging: true,
pageSettings: { pageSize: 7 },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-notifications/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
.e-expand::before {
content: '\e5b8';
}
.empImage {
margin: 6px 16px;
float: left;
width: 50px;
height: 50px;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Grid'></div>
</div>
</body>
</html>