How can I help you?
Localization in React Combo box component
21 Feb 202611 minutes to read
The Localization library enables you to translate static text content in the noRecordsTemplate and actionFailureTemplate properties based on the ComboBox’s assigned culture.
| Locale key | en-US (default) |
|---|---|
| noRecordsTemplate | No records found |
| actionFailureTemplate | The request failed |
Loading translations
Use the L10n class’s load function to register translation objects in your application.
In the following example, French culture is applied to the ComboBox. With no data loaded, the noRecordsTemplate displays French text. If run offline, the actionFailureTemplate also displays in the configured culture.
[Class-component]
// import L10n class for load function
import { L10n } from '@syncfusion/ej2-base';
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// bind remotedata to showcase actionFailureTemplate in offline.
customerData = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers'
});
// maps the appropriate column to fields property
fields = { text: 'ContactName', value: 'CustomerID' };
// take 0 item to showcase noRecordsTemplate property.
query = new Query().select(['ContactName', 'CustomerID']).take(0);
// set locale culture to ComboBox
componentWillMount() {
L10n.load({
'fr-BE': {
'dropdowns': {
'actionFailureTemplate': "Modèle d'échec d'action",
'noRecordsTemplate': "Aucun enregistrement trouvé"
}
}
});
}
render() {
return (
// specifies the tag for render the ComboBox component
<ComboBoxComponent id="comboelement" fields={this.fields} locale="fr-BE" query={this.query} dataSource={this.customerData} placeholder="Sélectionnez un client"/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));// import L10n class for load function
import { L10n } from '@syncfusion/ej2-base';
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// bind remotedata to showcase actionFailureTemplate in offline.
private customerData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers'
});
// maps the appropriate column to fields property
private fields: object = { text: 'ContactName', value: 'CustomerID' };
// take 0 item to showcase noRecordsTemplate property.
private query: Query = new Query().select(['ContactName', 'CustomerID']).take(0);
// set locale culture to ComboBox
public componentWillMount() {
L10n.load({
'fr-BE': {
'dropdowns': {
'actionFailureTemplate': "Modèle d'échec d'action",
'noRecordsTemplate': "Aucun enregistrement trouvé"
}
}
});
}
public render() {
return (
// specifies the tag for render the ComboBox component
<ComboBoxComponent id="comboelement" fields={this.fields} locale="fr-BE" query={this.query} dataSource={this.customerData} placeholder="Sélectionnez un client" />
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
// import L10n class for load function
import { L10n } from '@syncfusion/ej2-base';
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// bind remotedata to showcase actionFailureTemplate in offline.
customerData = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers'
});
// maps the appropriate column to fields property
fields = { text: 'ContactName', value: 'CustomerID' };
// take 0 item to showcase noRecordsTemplate property.
query = new Query().select(['ContactName', 'CustomerID']).take(0);
// set locale culture to ComboBox
componentWillMount() {
L10n.load({
'fr-BE': {
'dropdowns': {
'actionFailureTemplate': "Modèle d'échec d'action",
'noRecordsTemplate': "Aucun enregistrement trouvé"
}
}
});
}
render() {
return (
// specifies the tag for render the ComboBox component
<ComboBoxComponent id="comboelement" fields={this.fields} locale="fr-BE" query={this.query} dataSource={this.customerData} placeholder="Sélectionnez un client"/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));// import L10n class for load function
import { L10n } from '@syncfusion/ej2-base';
// import DataManager related classes
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// bind remotedata to showcase actionFailureTemplate in offline.
private customerData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers'
});
// maps the appropriate column to fields property
private fields: object = { text: 'ContactName', value: 'CustomerID' };
// take 0 item to showcase noRecordsTemplate property.
private query: Query = new Query().select(['ContactName', 'CustomerID']).take(0);
// set locale culture to ComboBox
public componentWillMount() {
L10n.load({
'fr-BE': {
'dropdowns': {
'actionFailureTemplate': "Modèle d'échec d'action",
'noRecordsTemplate': "Aucun enregistrement trouvé"
}
}
});
}
public render() {
return (
// specifies the tag for render the ComboBox component
<ComboBoxComponent id="comboelement" fields={this.fields} locale="fr-BE" query={this.query} dataSource={this.customerData} placeholder="Sélectionnez un client" />
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));