ASP.NET Core MultiSelect Overview

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 element and provides support for local and remote data binding, item and tag templates, and configurable options for controlling the list behavior.

• Demo page for the MultiSelect HtmlHelper

• Demo page for the MultiSelect TagHelper

Initializing the MultiSelect

The following example demonstrates how to define the MultiSelect.

HtmlHelperTagHelperController

Razor

    @(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);
        })
    )

Razor

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

C#

    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.

HtmlHelperTagHelper

Razor

    @(Html.Kendo().MultiSelect()
        .Name("multiselect")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .Placeholder("Select product...")
        .ItemTemplate("#= ProductID # #= 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>

Razor

    <kendo-multiselect name="multiselect"
                       datatextfield="ProductName"
                       datavaluefield="ProductID"
                       placeholder="Select product..."
                       item-template=" #= ProductID # #= 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:

HtmlHelperTagHelper

Razor

     @(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"
            }
        })
    )

Razor

    @{
        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

See Also

• Using the API of the MultiSelect for ASP.NET Core (Demo)
• Knowledge Base Section

In this article

Initializing the MultiSelectBasic ConfigurationFunctionality and FeaturesMultiSelect Down ArrowNext StepsSee Also

Not finding the help you need?

Contact Support

Improve this article