# 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 `<select>` 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](https://demos.telerik.com/aspnet-core/multiselect/index)

* [Demo page for the MultiSelect TagHelper](https://demos.telerik.com/aspnet-core/multiselect/tag-helper)

## Initializing the MultiSelect

The following example demonstrates how to define the MultiSelect.

```Razor HtmlHelper
    @(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 TagHelper
     <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# Controller
    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](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/helper-basics/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()`](http://api.jquery.com/jQuery.data/) configuration option. Once a reference is established, use the [MultiSelect client-side API](https://docs.telerik.com/kendo-ui/api/ui/multiselect#methods) to control its behavior.

```Razor HtmlHelper
    @(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>
```

```Razor TagHelper
    <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](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/multiselect/binding/binding-overview)—The MultiSelect supports remote and local binding to data.
* [Grouping](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/multiselect/grouping)—The built-in grouping features allows you to arrange the items in separate sets.
* [Virtualization](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/multiselect/virtualization)—To improve the performance when displaying a large number of records, take advantage of the MultiSelect virtualization.
* [Templates](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/multiselect/templates)—The templates allow you to customize the rendering of the items, tags, and pop-up header.
* [Select All](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/multiselect/select-all)—The Select All feature renders a sticky header that allows users to select or deselect all items at once.
* [Accessibility](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/multiselect/accessibility/overview)—The MultiSelect is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.

> tip To learn more about the appearance, anatomy, and accessibility of the MultiSelect, visit the [Progress Design System documentation](https://www.telerik.com/design-system/docs/components/multiselect/)—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:

```Razor HtmlHelper
     @(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 TagHelper
    @{
        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](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/multiselect/getting-started)

* [Basic Usage of the MultiSelect HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/multiselect/index)

* [Basic Usage of the MultiSelect TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/multiselect/tag-helper)

* [MultiSelect in Razor Pages](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/multiselect/binding/razor-page)

## See Also

* [Using the API of the MultiSelect for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/multiselect/api)
* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)