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.
//bind the data manager instance to dataSource property
var customerData = new ej.data.DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
adaptor: new ej.data.ODataV4Adaptor(),
crossDomain: true
});
var ddlObj = new ej.dropdowns.DropDownList({
dataSource: customerData,
// set locale culture to DropDownList
locale: 'fr-BE',
// map appropriate column
fields: { text: 'ContactName', value: 'CustomerID' },
// take 0 item to showcase noRecordsTemplate property.
query: new ej.data.Query().select(['ContactName', 'CustomerID']).take(0),
// set placeholder to DropDownList input element
placeholder: 'Sélectionnez un éléments'
});
ddlObj.appendTo('#ddlelement');
ej.base.L10n.load({
'fr-BE': {
'dropdowns': {
'noRecordsTemplate': "Aucun enregistrement trouvé",
'actionFailureTemplate': "Modèle d'échec d'action"
}
}
});<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 DropDownList</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="margin:0 auto; width:250px;">
<br>
<input type="text" id="ddlelement">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>