Search results

Localization

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.

Source
Preview
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ComboBoxComponent } from '@syncfusion/ej2-react-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';

export default class App extends React.Component<{}, {}> {
    // bind remotedata to showcase actionFailureTemplate in offline.
    private customerData: DataManager = new DataManager({
        url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });

    // 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 ComboBox
    componentWillMount() {
        L10n.load({
            'fr-BE': {
                'dropdowns': {
                    'noRecordsTemplate': "Aucun enregistrement trouvé",
                    'actionFailureTemplate': "Modèle d'échec d'action"
                }
            }
        });
    }

    render() {
        return (
             // specifies the tag for render the ComboBox component
            <ComboBoxComponent id="comboelement" 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 ComboBox</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/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: 40px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>