Getting started with Localization
27 Jun 20258 minutes to read
Localization library allows you to localize the text content of the Syncfusion® React UI Components. This is useful if you want to display the UI in a language other than English.
Loading translations
To load a translation object in your application, you can use the load function from the @syncfusion/ej2-base module. This function takes an object that contains the translations for various languages, with the keys being the language codes and the values being the translation objects.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { L10n } from '@syncfusion/ej2-base';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Page, Group } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
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': 'Zum nächsten Pager',
'previousPagerTooltip': 'Zum vorherigen Pager'
}
}
});
function App() {
const pageOptions = { pageSize: 6 };
return (<GridComponent dataSource={data} locale='de-DE' allowPaging={true} pageSettings={pageOptions} allowGrouping={true}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150'></ColumnDirective>
<ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Page, Group]}/>
</GridComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('grid'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { L10n } from '@syncfusion/ej2-base';
import { GridComponent, Inject, ColumnsDirective, ColumnDirective, Page, Group } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
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': 'Zum nächsten Pager',
'previousPagerTooltip': 'Zum vorherigen Pager'
}
}
});
function App() {
const pageOptions : Object = { pageSize: 6 };
return (<GridComponent dataSource={data} locale='de-DE' allowPaging={true} pageSettings={pageOptions} allowGrouping={true}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"></ColumnDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150'></ColumnDirective>
<ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Page, Group]}/>
</GridComponent>)
};
export default App;
ReactDOM.render(<App />, document.getElementById('grid'));
Changing current locale
The current locale can be changed for all the Syncfusion® React UI Components in your application by invoking setCulture
function with your desired culture name.
import {L10n, setCulture} from '@syncfusion/ej2-base';
L10n.load({
'fr-BE': {
'grid': {
'EmptyRecord': 'Aucun enregistrement à afficher',
'InvalidFilterMessage':'Données de filtrage invalides',
'UnGroup': 'Cliquez ici pour dégrouper '
}
}
});
setCulture('fr-BE');
Note: Before changing a culture globally, you need to ensure that locale text for the concerned culture is loaded through
L10n.load
function.