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

tagHelper
customization.cs
GameList.cs
<div>
    <ejs-multiselect id="games" dataSource="@ViewBag.data" tagging="onTagging" placeholder="Favorite Sports" value="@ViewBag.value" mode="Default">
        <e-multiselect-fields value="Id" text="Game"></e-multiselect-fields>
    </ejs-multiselect>
</div>
<script>
    function onTagging(e) {
        var msObject = document.getElementById("games").ej2_instances[0];
        e.setClass(e.itemData[msObject.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 IActionResult chipcustom()
        {
            ViewBag.value = new string[] { "Game1", "Game4", "Game7" };
            ViewBag.data = new GameList().GameLists();
            return View();
        }
    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class GameList
    {
        public string Id { get; set; }
        public string Game { get; set; }

        public List<GameList> GameLists()
        {
            List<GameList> game = new List<GameList>();
            game.Add(new GameList { Id = "Game1", Game = "American Football" });
            game.Add(new GameList { Id = "Game2", Game = "Badminton" });
            game.Add(new GameList { Id = "Game3", Game = "Basketball" });
            game.Add(new GameList { Id = "Game3", Game = "Basketball" });
            game.Add(new GameList { Id = "Game4", Game = "Cricket" });
            game.Add(new GameList { Id = "Game5", Game = "Football" });
            game.Add(new GameList { Id = "Game6", Game = "Golf" });
            game.Add(new GameList { Id = "Game7", Game = "Hockey" });
            game.Add(new GameList { Id = "Game8", Game = "Rugby" });
            game.Add(new GameList { Id = "Game9", Game = "Snooker" });
            game.Add(new GameList { Id = "Game10", Game = "Tennis" });
            return game;
        }
    }
}