Localization in JavaScript Mention control

08 May 2023 / 2 minutes to read

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

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

Loading translations

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

In the following sample, French culture is set to the mention control and no data is loaded. Hence, the noRecordsTemplate property displays its text in French culture initially.

Source

Preview

app.ts

index.html

import { Mention } from '@syncfusion/ej2-dropdowns';
// import L10n class for load function
import { L10n, setCulture} from '@syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

// bind remotedata to showcase actionFailureTemplate in offline.
let customerData: DataManager = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
    adaptor: new ODataV4Adaptor,
    crossDomain: true
});

let mentionObject: Mention = new Mention({
    dataSource: customerData,
    // set locale culture to Mention
    locale: 'fr-BE',
    // map appropriate column
    fields: { text: 'ContactName', value: 'CustomerID' },
    // take 0 item to showcase noRecordsTemplate property.
    query: new Query().select(['ContactName', 'CustomerID']).take(0)
});
mentionObject.appendTo('#mentionElement');

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

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Mention</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.2.3/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' style="width:200px;">
        <!--element which is the Mention target to list the suggestions-->
        <label style="font-size: 15px; font-weight: 600;">Comments</label>
        <div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
    </div>
</body>

</html>

Localization in JavaScript Mention control

Loading translations

See also