Checkbox in ASP.NET MVC MultiSelect
28 Aug 202612 minutes to read
The MultiSelect has built-in support to select multiple values through a checkbox when the mode property is set to CheckBox.
To use the checkbox selection, inject the CheckBoxSelection module into the MultiSelect.
@Html.EJS().MultiSelect("default").Placeholder("Select games").DataSource((IEnumerable<object>)ViewBag.data).Mode(Syncfusion.EJ2.DropDowns.VisualMode.CheckBox).Fields(new Syncfusion.EJ2.DropDowns.MultiSelectFieldSettings { Text = "Game", Value = "Id" }).Render()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 = "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;
}
}
}Select all
The MultiSelect control has built-in support to select all list items using a Select All option in the header.
When the showSelectAll property is set to true, the Select All text is shown by default. You can customize the text of the Select All option by using selectAllText.
For the Unselect All option, the default text is Unselect All. You can customize the text of the Unselect All option by using unSelectAllText.
@Html.EJS().MultiSelect("default").Placeholder("Select games").DataSource((IEnumerable<object>)ViewBag.data).Mode(Syncfusion.EJ2.DropDowns.VisualMode.CheckBox).ShowSelectAll(true).SelectAllText("Select All").UnSelectAllText("UnSelect All").Fields(new Syncfusion.EJ2.DropDowns.MultiSelectFieldSettings { Text = "Game", Value = "Id" }).Render()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 = "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;
}
}
}Selection limit
Defines the upper limit of the selected items using maximumSelectionLength.
@Html.EJS().MultiSelect("default").Placeholder("Select games").DataSource((IEnumerable<object>)ViewBag.data).Mode(Syncfusion.EJ2.DropDowns.VisualMode.CheckBox).MaximumSelectionLength(3).Fields(new Syncfusion.EJ2.DropDowns.MultiSelectFieldSettings { Text = "Game", Value = "Id" }).Render()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 = "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;
}
}
}Selection reordering
Use enableSelectionOrder to reorder the selected items in popup visibility state.
@Html.EJS().MultiSelect("default").Placeholder("Select games").DataSource((IEnumerable<object>)ViewBag.data).Mode(Syncfusion.EJ2.DropDowns.VisualMode.CheckBox).EnableSelectionOrder(false).Fields(new Syncfusion.EJ2.DropDowns.MultiSelectFieldSettings { Text = "Game", Value = "Id" }).Render()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;
}
}
}