ASP.NET MVC MultiSelect Overview
The MultiSelect is part of Telerik UI for ASP.NET MVC, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI MultiSelect HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI MultiSelect widget.
The MultiSelect displays a list of options and allows multiple selections from this list. The widget represents a richer version of the <select> element and provides support for local and remote data binding, item and tag templates, and configurable options for controlling the list behavior.
Initializing the MultiSelect
The following example demonstrates how to define the MultiSelect.
@(Html.Kendo().MultiSelect()
.Name("multiselect")
.DataTextField("ProductName")
.DataValueField("ProductID")
.Value(new[] { 2, 7 })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Products_Read", "Home");
})
.ServerFiltering(true);
})
)
public class MultiSelectController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult Products_Read(string text)
{
var result = GetProducts();
if (!string.IsNullOrEmpty(text))
{
result = result.Where(p => p.ProductName.Contains(text)).ToList();
}
return Json(result, JsonRequestBehavior.AllowGet);
}
private static IEnumerable<ProductViewModel> GetProducts()
{
var result = Enumerable.Range(0, 50).Select(i => new ProductViewModel
{
ProductID = "" + i,
ProductName = "Product " + i
});
return result;
}
}
Basic Configuration
The following example demonstrates the basic configuration of the MultiSelect. To get a reference to an existing Telerik UI MultiSelect instance, use the jQuery.data() configuration option. Once a reference is established, use the MultiSelect client-side API to control its behavior.
@(Html.Kendo().MultiSelect()
.Name("multiselect")
.DataTextField("ProductName")
.DataValueField("ProductID")
.Placeholder("Select product...")
.ItemTemplate("<span class=\"product-id-id\">#= ProductID #</span> #= ProductName #")
.Value(new[] { 2, 7 })
.Height(520)
.TagMode(MultiSelectTagMode.Single)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Products_Read", "Home");
})
.ServerFiltering(true);
})
.Events(events => events
.Change("onChange")
.Select("onSelect")
.Deselect("onDeselect")
.Open("onOpen")
.Close("onClose")
.DataBound("onDataBound")
.Filtering("onFiltering")
)
)
<script type="text/javascript">
$(function () {
// The Name() of the MultiSelect is used to get its client-side instance.
var multiselect = $("#multiselect").data("kendoMultiSelect");
});
</script>
Functionality and Features
- Binding—The MultiSelect supports remote and local binding to data.
- Grouping—The built-in grouping features allows you to arrange the items in separate sets.
- Virtualization—To improve the performance when displaying a large number of records, take advantage of the MultiSelect virtualization.
- Templates—The templates allow you to customize the rendering of the items, tags, and pop-up header.
- Accessibility—The MultiSelect is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
To learn more about the appearance, anatomy, and accessibility of the MultiSelect, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
MultiSelect Down Arrow
To enable the down arrow for toggling the popup container as in the Telerik UI DropDownList, set the DownArrow() option:
@(Html.Kendo().MultiSelect()
.Name("movies")
.DownArrow()
.BindTo(new List<SelectListItem>()
{
new SelectListItem() {
Text = "12 Angry Men", Value ="1"
},
new SelectListItem() {
Text = "Il buono, il brutto, il cattivo.", Value ="2"
},
new SelectListItem() {
Text = "Inception", Value ="3"
}
})
)
Next Steps
- Getting Started with the MultiSelect
- Basic Usage of the MultiSelect HtmlHelper for ASP.NET MVC (Demo)