- Binding local data
- Binding remote data
- See also
Contact Support
Working with Data in Mention
21 Dec 202213 minutes to read
The Mention loads the data either from local data source or remote data services using the DataSource property. It supports the data type of either array
or DataManager
.
The Mention also supports different kinds of data services such as OData V4 and Web API, and data formats such as XML, JSON, and JSONP with the help of DataManager
adaptors.
Fields | Type | Description |
---|---|---|
text | string |
Specifies the display text of each list item. |
value | number or string |
Specifies the hidden data value mapped to each list item that should contain a unique value. |
groupBy | string |
Specifies the category under which the list item has to be grouped. |
iconCss | string |
Specifies the icon class of each list item. |
NOTE
When binding complex data to the Mention, fields should be mapped correctly. Otherwise, the selected item remains undefined.
Binding local data
Local data can be represented in three ways as described in the following.
Array of simple data
The Mention has provided support to load an array of primitive data such as strings and numbers. Here, both the value and text fields act the same.
@model List<string>
@{
char nameMentionChar = '@';
string[] data = new string[] { "Selma Rose", "Garth", "Robert", "William", "Joseph" };
}
<div id="mentionElement" placeholder="Type @Html.Raw("mention") and tag user"></div>
@Html.EJS().Mention("Array-Of-Simple-Data").MentionChar(nameMentionChar).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();
}
}
}
Array of JSON data
The Mention can generate its list of items through an array of JSON data. Therefore the appropriate columns should be mapped to the Fields property.
In the following example, ID
column and Game
column from complex data have been mapped to the Value
field and Text
field, respectively.
@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("Array-Of-Json-Data").MentionChar(nameMentionChar).Target("#mentionElement").DataSource((IEnumerable<object>)data).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Game" , Value = "ID" }).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;
}
}
}
Array of complex data
The Mention can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the Fields property.
In the following example, Code.ID
and Country.Name
columns from the complex data have been mapped to the Value
and Text
fields respectively.
@model List<string>
@{
char nameMentionChar = '@';
List<CountryGroup> data = new CountryGroup().GetData();
}
<div id="mentionElement" placeholder="Type @Html.Raw("mention") and tag country"></div>
@Html.EJS().Mention("Complex-data-biding").MentionChar(nameMentionChar).Target("#mentionElement").DataSource((IEnumerable<object>)data).Fields(new Syncfusion.EJ2.DropDowns.MentionFieldSettings { Text = "Country.Name", Value = "Code.Id" }).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 Code
{
public string ID { get; set; }
}
public class Country
{
public string Name { get; set; }
}
public class CountryGroup
{
public Country Country { get; set; }
public Code Code { get; set; }
public List<CountryGroup> GetData()
{
List<CountryGroup> data = new List<CountryGroup>
{
new CountryGroup() { Country = new Country() { Name = "Australia" }, Code = new Code() { ID = "AU" } },
new CountryGroup() { Country = new Country() { Name = "Bermuda" }, Code = new Code() { ID = "BM" } },
new CountryGroup() { Country = new Country() { Name = "Canada" }, Code = new Code() { ID = "CA" } },
new CountryGroup() { Country = new Country() { Name = "Cameroon" }, Code = new Code() { ID = "CM" } },
new CountryGroup() { Country = new Country() { Name = "Denmark" }, Code = new Code() { ID = "DK" } },
new CountryGroup() { Country = new Country() { Name = "France" }, Code = new Code() { ID = "FR" } }
};
return data;
}
}
}
Binding remote data
The Mention supports retrieval of data from remote data services with the help of DataManager
control. The Query property is used to fetch the data from the database and bind it to the Mention control.
OData v4 adaptor - Binding OData v4 service
The ODataV4 is an improved version of OData protocols, and the DataManager
can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the odata documentation. To bind OData v4 service, use the ODataV4Adaptor
.
The following sample displays the first 6 contacts from Customers
table of the Northwind
Data Service.
@model List<string>
@{
char nameMentionChar = '@';
var query = "new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(6)";
}
<div id="mentionElement" placeholder="Type @Html.Raw("mention") and tag user"></div>
@Html.EJS().Mention("employee").Target("#mentionElement").MentionChar(nameMentionChar).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;
}
</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();
}
}
}
Web API adaptor
You can use WebApiAdaptor
to bind mention with Web API created using OData endpoint.
@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").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;
}
</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();
}
}
}