Localization in EJ2 JavaScript Combo box control

2 May 20234 minutes to read

The Localization library allows you to localize static text content of the noRecordsTemplate and actionFailureTemplate  properties according to the culture currently assigned to the ComboBox.

Locale key en-US (default)
noRecordsTemplate No records found
actionFailureTemplate The request failed

Loading translations

To load translation object to your application, use load function of L10n class.

In the following sample, French culture is set to the ComboBox 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
});
//initiates the component
var comboBoxObject =  new ej.dropdowns.ComboBox({
    //set the data to dataSource property
    dataSource: customerData,
    // set locale culture to ComboBox
    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 ComboBox input element
    placeholder: 'Sélectionnez un éléments'
});
comboBoxObject.appendTo('#comboelement');

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 ComboBox</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="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/23.1.36/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:50px auto 0; width:250px;">
        <br>
        <input type="text" id="comboelement">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also