The MultiSelect allows the user to customize the selected chip element through the tagging event. In that event, you can set the custom classes to chip element via that event argument of setClass
method.
The following sample demonstrates chip-customization with the MultiSelect control.
<div id='local-data'>
<div class='control-wrapper'>
@Html.EJS().MultiSelect("chip-customization").Tagging("onTagging").Placeholder("Select a color").DataSource((IEnumerable<object>)ViewBag.data).Fields(new Syncfusion.EJ2.DropDowns.MultiSelectFieldSettings { Text = "Color", Value = "Code" }).Render()
</div>
</div>
<style>
.e-multi-select-wrapper .e-chips {
opacity: 0.9;
}
.e-multi-select-wrapper .e-chips:hover {
opacity: 1;
}
.e-multi-select-wrapper .e-chips .e-chips-close.e-icon::before,
.e-multi-select-wrapper .e-chips .e-chipcontent,
.e-multi-select-wrapper .e-chips .e-chipcontent:hover {
color: #ffffff;
}
.e-chips.chocolate,
.e-chips.chocolate:hover {
background-color: #75523C;
}
.e-chips.darkorange,
.e-chips.darkorange:hover {
background-color: #FF843D;
}
.e-chips.darkred,
.e-chips.darkred:hover {
background-color: #CA3832;
}
.e-chips.fuchsia,
.e-chips.fuchsia:hover {
background-color: #D44FA3;
}
.e-chips.cadetblue,
.e-chips.cadetblue:hover {
background-color: #3B8289;
}
.e-chips.hotpink,
.e-chips.hotpink:hover {
background-color: #F23F82;
}
.e-chips.indigo,
.e-chips.indigo:hover {
background-color: #2F5D81;
}
.e-chips.limegreen,
.e-chips.limegreen:hover {
background-color: #4CD242;
}
.e-chips.orangered,
.e-chips.orangered:hover {
background-color: #FE2A00;
}
.e-chips.tomato,
.e-chips.tomato:hover {
background-color: #FF745C;
}
</style>
<script type="text/javascript">
function onTagging(e) {
var colors = document.getElementById('chip-customization').ej2_instances[0];
e.setClass((e.itemData)[colors.fields.text].toLowerCase());
}
</script>
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 MultiSelectController : Controller
{
public ActionResult chipcustom()
{
ViewBag.data = new ColorsData().GetColorsData();
return View();
}
}
}