The Localization library allows you to localize static text content of the noRecordsTemplate and actionFailureTemplate properties according to the culture currently assigned to the DropDownList.
Locale key | en-US (default) |
---|---|
noRecordsTemplate | No records found |
actionFailureTemplate | The request failed |
To load translation object to your application, use load function of the L10n class.
In the following sample, French culture is set to the DropDownList and no data is loaded. Hence, the
noRecordsTemplate
property displays its text in French culture initially, and if the sample is run
offline, the actionFailureTemplate
property displays its text appropriately.
[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 { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
constructor() {
super(...arguments);
// bind remotedata to showcase actionFailureTemplate in offline.
this.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
this.fields = { text: 'ContactName', value: 'CustomerID' };
// take 0 item to showcase noRecordsTemplate property.
this.query = new Query().select(['ContactName', 'CustomerID']).take(0);
}
// set locale culture to DropDownList
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 DropDownList component
<DropDownListComponent id="ddlelement" fields={this.fields} locale="fr-BE" query={this.query} dataSource={this.customerData} placeholder="Sélectionnez un client"/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React DropDownList</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/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>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
// 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 { DropDownListComponent } 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 DropDownList
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 DropDownList component
<DropDownListComponent id="ddlelement" 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 { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
customerData: DataManager = new DataManager({
adaptor: new ODataV4Adaptor,
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers'
});
fields: object = { text: 'ContactName', value: 'CustomerID' };
query: Query = new Query().select(['ContactName', 'CustomerID']).take(0);
// set locale culture to DropDownList
React.useEffect(() => {
L10n.load({
'fr-BE': {
'dropdowns': {
'actionFailureTemplate': "Modèle d'échec d'action",
'noRecordsTemplate': "Aucun enregistrement trouvé"
}
}
});
}, []);
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" fields={fields} locale="fr-BE" query={query} dataSource={customerData} placeholder="Sélectionnez un client"/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React DropDownList</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/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>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
// 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 { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// 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 DropDownList
React.useEffect(() => {
L10n.load({
'fr-BE': {
'dropdowns': {
'actionFailureTemplate': "Modèle d'échec d'action",
'noRecordsTemplate': "Aucun enregistrement trouvé"
}
}
});
}, []);
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" fields={fields} locale="fr-BE" query={query} dataSource={customerData} placeholder="Sélectionnez un client" />
);
}
ReactDOM.render(<App />, document.getElementById('sample'));