# ASP.NET MVC DropDownList Overview

The Telerik UI DropDownList HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI DropDownList widget.

The DropDownList displays a list of values and allows for a single selection from the list. The user input is restricted within the predefined options.

* [Demo page for the DropDownList HtmlHelper](https://demos.telerik.com/aspnet-mvc/dropdownlist/index)

## Initializing the DropDownList

The following example demonstrates how to define the DropDownList.

```Razor HtmlHelper
    @(Html.Kendo().DropDownList()
        .Name("dropdownlist")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .DataSource(source => {
            source.Read(read =>
            {
                read.Action("Products_Read", "DropDownList");
            });
        })
    )
```

```C# Controller

    public class DropDownListController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult Products_Read()
        {
            var result = Enumerable.Range(0, 50).Select(i => new ProductViewModel
            {
                ProductID = i,
                ProductName = "Product " + i
            });

            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }
```

## Basic Configuration

The DropDownList configuration options are passed as attributes.

```Razor HtmlHelper
    @(Html.Kendo().DropDownList()
        .Name("dropdownlist")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .HtmlAttributes(new { style = "width:100%" })
        .Filter("contains")
        .MinLength(3)
        .Height(290)
        .HeaderTemplate(
            "<div class=\"dropdown-header k-widget k-header\">" +
                "<span>Products</span>" +
            "</div>")
        .FooterTemplate("Total <strong>#: instance.dataSource.total() #</strong> items found")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Products_Read", "DropDownList");
            })
            .ServerFiltering(false);
        })
        .Events(e => e
            .Change("onChange")
            .Select("onSelect")
            .Open("onOpen")
            .Close("onClose")
            .DataBound("onDataBound")
            .Filtering("onFiltering")
        )
    )

    <script type="text/javascript">
        $(function () {
            // The Name() of the DropDownList is used to get its client-side instance.
            var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
            console.log(dropdownlist);
        });
    </script>
```

```C# Controller
    public JsonResult Products_Read(string text)
    {
        using (var northwind = GetContext())
        {
            var products = northwind.Products.Select(product => new ProductViewModel
            {
                ProductID = product.ProductID,
                ProductName = product.ProductName,
                UnitPrice = product.UnitPrice.Value,
                UnitsInStock = product.UnitsInStock.Value,
                UnitsOnOrder = product.UnitsOnOrder.Value,
                Discontinued = product.Discontinued
            });

            if (!string.IsNullOrEmpty(text))
            {
                products = products.Where(p => p.ProductName.Contains(text));
            }

            return Json(products.ToList(), JsonRequestBehavior.AllowGet);
        }
    }
```

## Functionality and Features

* [Binding](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/dropdownlist/binding/ajax-binding)—The DropDownList supports multiple data binding approaches: server, model, custom, and ajax binding.
* [Grouping](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/dropdownlist/grouping)—You can bind the DropDownList to grouped data sources.
* [Virtualization](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/dropdownlist/virtualization)—The virtualization feature of the DropDownList allows you to display large datasets.
* [Templates](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/dropdownlist/templates)—To control how the items, selected value, or a pop-up header are rendered, you can use the available templates.
* [Accessibility](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/dropdownlist/accessibility/overview)—The DropDownList 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 DropDownList, visit the [Progress Design System documentation](https://www.telerik.com/design-system/docs/components/dropdownlist/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

## Next Steps

* [Getting Started with the DropDownList](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/dropdownlist/getting-started)

* [ASP.NET MVC DropDownList Overview Demo](https://demos.telerik.com/aspnet-mvc/dropdownlist)

## See Also

* [Using the API of the DropDownList for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/dropdownlist/api)
* [Knowledge Base Section](https://www.telerik.com/aspnet-mvc/documentation/knowledge-base)