Customization in EJ2 TypeScript Mention control

2 May 20239 minutes to read

Show or hide mention character

You can show the mention character as the prefix of the selected item in mention component using showMentionChar property. The default value of showMentionChar is false.

import { Mention } from '@syncfusion/ej2-dropdowns';

// defined the array of complex data
let emailData: { [key: string]: Object }[] = [
    { Name: 'Selma Rose', EmailId : 'selma@gmail.com' },
    { Name: 'Maria', EmailId : 'maria@gmail.com' },
    { Name: 'Russo kay', EmailId : 'russo@gmail.com' },
    { Name: 'Robert', EmailId : 'robert@gmail.com' },
    { Name: 'Garth', EmailId : 'garth@gmail.com' }
];

// initialize Mention control
let mentionObject: Mention = new Mention({
    //set the data to dataSource property
    dataSource: emailData,
    // maps the appropriate column to fields property
    fields: { text: 'Name', value: 'EmailId' },
    mentionChar: '#',
    showMentionChar: true
});

// render initialized Mention
mentionObject.appendTo('#mentionElement');
<!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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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>

Adding the suffix character after selection

You can add the suffix character while selecting an item in the Mention component using suffixText property. You can add space or new line as suffix to the selected item. The default values are empty string.

import { Mention } from '@syncfusion/ej2-dropdowns';

// define the array of complex data
let sportsData: { [key: string]: Object }[] = [
    { ID: 'game1', Game: 'Badminton'},
    { ID: 'game2', Game: 'Football'},
    { ID: 'game3', Game: 'Tennis' },
    { ID: 'game4', Game: 'Hockey' },
    { ID: 'game5', Game: 'Basketball'}
];

// initialize Mention control
let mentionObject: Mention = new Mention({
    dataSource: sportsData,
    // maps the appropriate column to fields property
    fields: { text: 'Game', value: 'ID' },
    suffixText: '&nbsp;'
});

// render initialized Mention
mentionObject.appendTo('#mentionElement');
<!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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container' style="width:200px;">
        <label style="font-size: 15px; font-weight: 600;">Comments</label>
        <!--element which is the Mention target to list the suggestions-->
        <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>

Configure the popup list

You can customize the suggestion list as width and height using the popupHeight and popupWidth properties.

By default, the popup list width value is set as auto. Depending on the mentioned suggestion data list, the width value is automatically adjusted. The popup list height value is set as 300px.

import { Mention } from '@syncfusion/ej2-dropdowns';

// define the array of complex data
let countriesData: { [key: string]: Object }[] = [
    { Country : 'Australia', Code : 'AU'},
    { Country : 'Bermuda', Code : 'BM' },
    { Country : 'Canada', Code : 'CA' },
    { Country : 'Cameroon', Code : 'CM' },
    { Country : 'Denmark', Code : 'DK' }
];

// initialize Mention control
let mentionObject: Mention = new Mention({
    //set the data to dataSource property
    dataSource: countriesData,
    // maps the appropriate column to fields property
    fields: { text: 'Country', value: 'Code' },
    //set height to popup list
    popupHeight: '200px',
    //set width to popup list
    popupWidth: '250px'
});

// render initialized Mention
mentionObject.appendTo('#mentionElement');
<!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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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>

Trigger character

You can customize the trigger character by using the mentionChar property in the Mention control. The trigger character triggers the suggestion list to display in the target area.

By default, the mentionChar is @.