Custom Value in ASP.NET CORE MultiSelect

28 Aug 20263 minutes to read

The MultiSelect allows user to add a new option that is not present in the data source to the control value when allowCustomValue is enabled. When the new custom value is selected, the customValueSelection event is triggered.

The following sample demonstrates the custom value configuration with the MultiSelect control.

CSHTML

<ejs-multiselect id="games" dataSource="@ViewBag.data" placeholder="Favorite Sports" allowCustomValue="true" mode="Default">
        <e-multiselect-fields value="Id" text="Game"></e-multiselect-fields>
</ejs-multiselect>

Gamelist.cs

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