ASP.NET MVC
Demos
Support
Forum
Download
Search results

Chip Customization

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.

razor
customization.cs
<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();
        }
    }
}
Previous
Next