Search results

Chip Customization in ASP.NET Core MultiSelect control

22 Jul 2021 / 1 minute 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.

tagHelper
customization.cs
Copied to clipboard
<ejs-multiselect id="chip-customization" dataSource="@ViewBag.data" placeholder="Favorite Colors"
                 mode="Box" tagging="onTagging">
    <e-multiselect-fields text="Color" value="Code"></e-multiselect-fields>
</ejs-multiselect>

<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>
Copied to clipboard
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();
        }
    }
}