Localization in React MultiColumn ComboBox component

14 Jun 20243 minutes to read

The Localization library allows you to localize static text content of the noRecordsTemplate property according to the culture currently assigned to the MultiColumn ComboBox.

Locale key en-US (default)
noRecordsTemplate No records found

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 MultiColumn ComboBox and no data is loaded. Hence, the noRecordsTemplate property displays its text in French culture.

import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox';
import { L10n, setCulture} from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    // setting the placeholder for multicolumn combobox
    const watermark = 'Sélectionnez un client'
    return (
    // specifies the tag for render the MultiColumn ComboBox component
    <MultiColumnComboBoxComponent id="multicolumn" dataSource={[]} locale='fr-BE' placeholder={watermark}>
        <ColumnsDirective>
            <ColumnDirective field='ContactName' header='Contact Name' width={90}></ColumnDirective>
            <ColumnDirective field='CustomerID' header='Customer ID' width={160}></ColumnDirective>
        </ColumnsDirective>
    </MultiColumnComboBoxComponent>
  );
}
ReactDOM.render(<App />, document.getElementById('multicolumn'));

L10n.load({
  'fr-BE': {
     'multicolumncombobox': {
           'noRecordsTemplate': "Aucun enregistrement trouvé"
       }
   }
});
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox';
import { L10n, setCulture} from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  // set placeholder to multicolumn ComboBox input element
  const watermark: string = 'Sélectionnez un client';

  return (
    // specifies the tag for render the MultiColumn ComboBox component
    <MultiColumnComboBoxComponent id="multicolumn" dataSource={[]} placeholder={watermark} locale='fr-BE'>
        <ColumnsDirective>
            <ColumnDirective field='ContactName' header='Contact Name' width={90}></ColumnDirective>
            <ColumnDirective field='CustomerID' header='Customer ID' width={160}></ColumnDirective>
        </ColumnsDirective>
    </MultiColumnComboBoxComponent>
  );
}
ReactDOM.render(<App />, document.getElementById('multicolumn'));

L10n.load({
  'fr-BE': {
     'multicolumncombobox': {
           'noRecordsTemplate': "Aucun enregistrement trouvé"
       }
   }
});