Templates in Mention

14 Nov 20228 minutes to read

The Mention has been provided with several options to customize each suggestion list item, display item, and data loading indication.

Item template

The content of each list item in the Mention can be customized using the ItemTemplate property.

In the following sample, each list item is split into two columns to display relevant data using ItemTemplate.

@model List<string>
@{
    char nameMentionChar = '@';
    var query = "new ej.data.Query().select(['FirstName','Country', 'EmployeeID']).take(6).requiresCount()";
}
<div id="mentionElement" placeholder="Type @Html.Raw("mention") and tag user"></div>

@Html.EJS().Mention("employee").PopupWidth("250px").MentionChar(nameMentionChar).SuggestionCount(6).Target("#mentionElement").ItemTemplate("<span><span class=\"name\"> ${FirstName}</span><span class=\"city\">${Country}</span></span>").DataSource(obj =>
obj.Url("https://services.syncfusion.com/aspnet/production/api/Employees").CrossDomain(true).Adaptor("WebApiAdaptor")).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings
{
   Text = "FirstName",
   Value = "EmployeeID"
}).Query((string)query).Render()

<style>

    div#mentionElement[placeholder]:empty:before {
        content: attr(placeholder);
    }

    .city {
        right: 15px;
        position: absolute;
    }

    #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;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class MentionController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

ASP.NET MVC Mention item template

Display template

You can customize the mentioned value’s display appearance using the DisplayTemplate property.

In the following sample, the selected value is displayed as a combined text of both FirstName and City in the mention element, which is separated by a hyphen.

@model List<string>
@{
    char nameMentionChar = '@';
    var query = "new ej.data.Query().select(['FirstName','Country', 'EmployeeID']).take(6).requiresCount()";
}
<div id="mentionElement" placeholder="Type @Html.Raw("mention") and tag user"></div>

@Html.EJS().Mention("employee").PopupWidth("250px").MentionChar(nameMentionChar).Target("#mentionElement").ItemTemplate("<span><span class=\"name\"> ${FirstName}</span><span class=\"city\">${Country}</span></span>").DisplayTemplate("<span>${FirstName} - ${City}</span>").DataSource(obj =>
obj.Url("https://services.syncfusion.com/aspnet/production/api/Employees").CrossDomain(true).Adaptor("WebApiAdaptor")).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings
{
   Text = "FirstName",
   Value = "EmployeeID"
}).Query((string)query).Render()

<style>

    div#mentionElement[placeholder]:empty:before {
        content: attr(placeholder);
    }

    .city {
        right: 15px;
        position: absolute;
    }

    #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;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class MentionController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

ASP.NET MVC Mention display template

No records template

You can show the custom design of the popup list content when no data and matches are found on the search with the help of NoRecordsTemplate property.

@model List<string>
@{
    char nameMentionChar = '@';
    string[] data = new string[] { };
}

<div id="mentionElement" placeholder="Type @Html.Raw("mention") and tag user"></div>
@Html.EJS().Mention("noRecord-template").MentionChar(nameMentionChar).NoRecordsTemplate("<span class='norecord'> NO DATA AVAILABLE</span>").Target("#mentionElement").DataSource((IEnumerable<object>)data).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;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class MentionController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

ASP.NET MVC Mention no record template

Spinner template

Display the customized waiting spinner, when data fetching takes time to load in the suggestion list by using the SpinnerTemplate property.

@model List<string>
@{
    char nameMentionChar = '@';
    var query = "new ej.data.Query().select(['FirstName','Country','EmployeeID']).take(6).requiresCount();"
}
<div id="mentionElement" placeholder="Type @Html.Raw("mention") and tag user"></div>

@Html.EJS().Mention("employee").MentionChar(nameMentionChar).Target("#mentionElement").PopupWidth("200px").SpinnerTemplate("<div class='spinner_loader'></div>").DataSource(obj =>
obj.Url("https://services.syncfusion.com/aspnet/production/api/Employees").CrossDomain(true).Adaptor("WebApiAdaptor")).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings
{
   Text = "FirstName",
   Value = "EmployeeID"
}).Query((string)query).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;
    }

    .spinner_loader {
        border: 10px solid #f3f3f3;
        border-radius: 50%;
        border-top: 10px solid #3498db;
        width: 5px;
        height: 5px;
        position: absolute;
        top: 6px;
        left: 85px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
    }

    /* Safari */
    @@-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @@keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class MentionController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

ASP.NET MVC Mention spinner template

See also