ASP.NET Core MultiSelect Overview
The MultiSelect is part of Telerik UI for ASP.NET Core, 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 TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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);
})
)
<kendo-multiselect name="multiselect"
datatextfield="ProductName"
datavaluefield="ProductID"
value='new[] {2, 7}'>
<datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
<transport>
<read url="@Url.Action("Products_Read", "Home")" />
</transport>
</datasource>
</kendo-multiselect>
public class MultiSelectController : Controller
{
public IActionResult 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);
}
private static IEnumerable<ProductViewModel> GetProducts()
{
var result = Enumerable.Range(0, 50).Select(i => new ProductViewModel
{
ProductID = "" + i,
ProductName = "Product " + i
});
return result;
}
}
Starting with the 2024 Q3 release, the HtmlHelper version of the component supports declarative initialization.
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>
<kendo-multiselect name="multiselect"
datatextfield="ProductName"
datavaluefield="ProductID"
placeholder="Select product..."
item-template="<span class=product-id-id> #= ProductID #</span> #= ProductName #"
value='new[] {2, 7}'
height="520"
tag-mode="single"
on-change="onChange"
on-select="onSelect"
on-deselect="OnDeselect"
on-open="onOpen"
on-close="onClose"
on-data-bound="onDataBound"
on-filtering="onFiltering">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("Products_Read", "Home")" />
</transport>
</datasource>
</kendo-multiselect>
<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"
}
})
)
@{
var multiSelect_data = 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"}
};
}
<kendo-multiselect name="movies"
down-arrow="true"
bind-to="multiSelect_data">
</kendo-multiselect>
Next Steps
- Getting Started with the MultiSelect
Basic Usage of the MultiSelect HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the MultiSelect TagHelper for ASP.NET Core (Demo)
- MultiSelect in Razor Pages