Chip Customization

5 Jun 20245 minutes to read

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.

CSHTML

<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>

Gamelist.cs

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;
        }
    }
}