Localization in Vue Combo box component

11 Jun 20244 minutes to read

The Localization library allows you to localize static text content of the noRecordsTemplate and actionFailureTemplate  property 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 the 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.

<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
      <br>
      <ejs-combobox id='combobox' locale='fr-BE' :fields='fields' :dataSource='customerData' :query='query'
        placeholder="Sélectionnez un client"></ejs-combobox>
    </div>
  </div>
</template>
<script setup>
import { ComboBoxComponent as EjsCombobox } from "@syncfusion/ej2-vue-dropdowns";
//import DataManager related classes
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
// import L10n class for load function
import { L10n } from '@syncfusion/ej2-base';

L10n.load({
  'fr-BE': {
    'dropdowns': {
      'noRecordsTemplate': "Aucun enregistrement trouvé",
      'actionFailureTemplate': "Modèle d'échec d'action"
    }
  }
});

const customerData = new DataManager({
  url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
  adaptor: new ODataV4Adaptor,
  crossDomain: true
});
const fields = { text: 'ContactName', value: 'CustomerID' };
const query = new Query().select(['ContactName', 'CustomerID']).take(0);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
</style>
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
      <br>
      <ejs-combobox id='combobox' locale='fr-BE' :fields='fields' :dataSource='customerData' :query='query'
        placeholder="Sélectionnez un client"></ejs-combobox>
    </div>
  </div>
</template>
<script>
import { ComboBoxComponent } from "@syncfusion/ej2-vue-dropdowns";
//import DataManager related classes
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
// import L10n class for load function
import { L10n } from '@syncfusion/ej2-base';

L10n.load({
  'fr-BE': {
    'dropdowns': {
      'noRecordsTemplate': "Aucun enregistrement trouvé",
      'actionFailureTemplate': "Modèle d'échec d'action"
    }
  }
});

export default {
  name: "App",
  components: {
    "ejs-combobox": ComboBoxComponent
  },
  data() {
    return {
      customerData: new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
      }),
      fields: { text: 'ContactName', value: 'CustomerID' },
      query: new Query().select(['ContactName', 'CustomerID']).take(0),
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
</style>

See Also