- Show or hide mention character
- Adding the suffix character after selection
- Configure the popup list
- Trigger character
- Leading Space Requirement
Contact Support
Customization in Mention
27 Mar 202512 minutes to read
Show or hide mention character
You can show the mention character as the prefix of the selected item in mention control using ShowMentionChar property. The default value of ShowMentionChar
is false
.
@model List<string>
@{
char nameMentionChar = '#';
List<EmailData> data = new EmailData().EmailList();
}
<div id="mentionElement" placeholder="Type @Html.Raw("mention") and tag user"></div>
@Html.EJS().Mention("Mention-Char-Customize").Target("#mentionElement").MentionChar(nameMentionChar).DataSource((IEnumerable<object>)data).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Name" }).ShowMentionChar(true).Render()
<style>
div#mentionElement[placeholder]:empty:before {
content: attr(placeholder);
}
#mentionElement{
min-height: 100px;
border: 1px solid #D7D7D7;
border-radius: 4px;
padding: 8px;
font-size: 14px;
width: 600px;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace WebApplication1.Models
{
public class EmailData
{
public string Name { get; set; }
public string EmailId { get; set; }
public List<EmailData> EmailList()
{
List<EmailData> email = new List<EmailData>()
{
new EmailData { Name = "Selma Rose", EmailId = "selma@gmail.com" },
new EmailData { Name = "Maria", EmailId = "maria@gmail.com" },
new EmailData { Name = "Russo kay", EmailId = "russo@gmail.com" },
new EmailData { Name = "Robert", EmailId = "robert@gmail.com" },
new EmailData { Name = "Garth", EmailId = "garth@gmail.com" }
};
return email;
}
}
}
Adding the suffix character after selection
You can add the suffix character while selecting an item in the Mention control using SuffixText property. You can add space or new line as suffix to the selected item. The default values are empty string.
@model List<string>
@{
char nameMentionChar = '@';
List<SportsData> data = new SportsData().SportsList();
}
<div id="mentionElement" placeholder="Type @Html.Raw("mention") and tag sport"></div>
@Html.EJS().Mention("Suffix").Target("#mentionElement").MentionChar(nameMentionChar).DataSource((IEnumerable<object>)data).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Game" , Value = "ID" }).SuffixText(" ").Render()
<style>
div#mentionElement[placeholder]:empty:before {
content: attr(placeholder);
}
#mentionElement{
min-height: 100px;
border: 1px solid #D7D7D7;
border-radius: 4px;
padding: 8px;
font-size: 14px;
width: 600px;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace WebApplication1.Models
{
public class SportsData
{
public string ID { get; set; }
public string Game { get; set; }
public List<SportsData> SportsList()
{
List<SportsData> sports = new List<SportsData>()
{
new SportsData { ID = "game1", Game = "Badminton" },
new SportsData { ID = "game2", Game = "Football" },
new SportsData { ID = "game3", Game = "Tennis" },
new SportsData { ID = "game4", Game = "Hockey" },
new SportsData { ID = "game5", Game = "Basketball" },
};
return sports;
}
}
}
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
.
@model List<string>
@{
List<Countries> data = new Countries().GetData();
char nameMentionChar = '@';
}
<div id="mentionElement" placeholder="Type @Html.Raw("mention") and tag country"></div>
@Html.EJS().Mention("Popup-Litst-Customize").Target("#mentionElement").MentionChar(nameMentionChar).DataSource((IEnumerable<object>)data).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Country" }).PopupWidth("250px").PopupHeight("200px").Render()
<style>
div#mentionElement[placeholder]:empty:before {
content: attr(placeholder);
}
#mentionElement{
min-height: 100px;
border: 1px solid #D7D7D7;
border-radius: 4px;
padding: 8px;
font-size: 14px;
width: 600px;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace WebApplication1.Models
{
public class Countries
{
public string Country { get; set; }
public string Code { get; set; }
public List<Countries> GetData()
{
List<Countries> data = new List<Countries>()
{
new Countries() { Country = "Australia", Code = "AU" },
new Countries() { Country = "Bermuda" , Code = "BM" },
new Countries() { Country = "Canada" , Code = "CA" },
new Countries() { Country = "Cameroon" , Code = "CM" },
new Countries() { Country = "Denmark" , Code = "DK" }
};
return data;
}
}
}
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 @
.
Leading Space Requirement
The RequireLeadingSpace property in Mention controls whether a space is needed before triggering the Mention suggestion popup.
When set to false
, the mention can be activated without a preceding space. When set to true
, a space is required before the mention character to activate suggestions.
@model List<string>
@{
List<EmailData> data = new EmailData().EmailList();
}
<div id="mentionElement" placeholder="Type @Html.Raw("mention") and tag user"></div>
@Html.EJS().Mention("Mention-Char-Customize").Target("#mentionElement").DataSource((IEnumerable<object>)data).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Name" }).RequireLeadingSpace(false).Render()
<style>
div#mentionElement[placeholder]:empty:before {
content: attr(placeholder);
}
#mentionElement{
min-height: 100px;
border: 1px solid #D7D7D7;
border-radius: 4px;
padding: 8px;
font-size: 14px;
width: 600px;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace WebApplication1.Models
{
public class EmailData
{
public string Name { get; set; }
public string EmailId { get; set; }
public List<EmailData> EmailList()
{
List<EmailData> email = new List<EmailData>()
{
new EmailData { Name = "Selma Rose", EmailId = "selma@gmail.com" },
new EmailData { Name = "Maria", EmailId = "maria@gmail.com" },
new EmailData { Name = "Russo kay", EmailId = "russo@gmail.com" },
new EmailData { Name = "Robert", EmailId = "robert@gmail.com" },
new EmailData { Name = "Garth", EmailId = "garth@gmail.com" }
};
return email;
}
}
}