Chip customization in ASP.NET MVC MultiSelect

28 Aug 20265 minutes to read

The MultiSelect allows you to customize the selected chip element through the tagging event. Inside that event, you can set custom classes on the chip element through the setClass method of the event argument.

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;

namespace WebApplication1.Models
{
    public class ColorsData
    {
        public string Color { get; set; }
        public string Code { get; set; }
        public List<ColorsData> GetColorsData()
        {
            List<ColorsData> color = new List<ColorsData>();
            color.Add(new ColorsData { Color = "Chocolate", Code = "#75523C" });
            color.Add(new ColorsData { Color = "CadetBlue", Code = "#3B8289" });
            color.Add(new ColorsData { Color = "DarkOrange", Code = "#FF843D" });
            color.Add(new ColorsData { Color = "DarkRed", Code = "#CA3832" });
            color.Add(new ColorsData { Color = "Fuchsia", Code = "#D44FA3" });
            color.Add(new ColorsData { Color = "HotPink", Code = "#F23F82" });
            color.Add(new ColorsData { Color = "Indigo", Code = "#2F5D81" });
            color.Add(new ColorsData { Color = "LimeGreen", Code = "#4CD242" });
            color.Add(new ColorsData { Color = "OrangeRed", Code = "#FE2A00" });
            color.Add(new ColorsData { Color = "Tomato", Code = "#FF745C" });
            return color;
        }
    }
}