ASP.NET Core DropDownList Overview

The Telerik UI DropDownList TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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

• Demo page for the DropDownList TagHelper

Initializing the DropDownList

The following example demonstrates how to define the DropDownList.

Razor

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

Razor

    <kendo-dropdownlist name="dropdownlist"
                    datatextfield="ProductName"
                    datavaluefield="ProductID">
    <datasource>
        <transport>
            <read url="@Url.Action("Products_Read", "DropDownList")" />
        </transport>
    </datasource>
</kendo-dropdownlist>

C#

    public class DropDownListController : Controller
    {
        public IActionResult 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);
        }
    }

Starting with the 2024 Q3 release, the HtmlHelper version of the component supports declarative initialization.

Basic Configuration

The DropDownList configuration options are passed as attributes.

Razor

    @(Html.Kendo().DropDownList()
        .Name("products")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .HtmlAttributes(new { style = "width:100%;" })
        .Filter(FilterType.Contains)
        .DataSource(source => source
            .Read(read => read.Action("GetProducts", "Home"))
        )
    )

Razor

    <kendo-dropdownlist name="products" filter="FilterType.Contains"
        placeholder="Select product"
        datatextfield="ProductName"
        datavaluefield="ProductID"
        style="width: 100%;">
        <datasource>
            <transport>
                <read url="@Url.Action("GetProducts", "Home")" />
            </transport>
        </datasource>
    </kendo-dropdownlist>

C#

    public JsonResult GetProducts(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());
        }
    }

Functionality and Features

• Binding—The DropDownList supports multiple data binding approaches: server, model, custom, and ajax binding.
• Grouping—You can bind the DropDownList to grouped data sources.
• Virtualization—The virtualization feature of the DropDownList allows you to display large datasets.
• Templates—To control how the items, selected value, or a pop-up header are rendered, you can use the available templates.
• Accessibility—The DropDownList 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 DropDownList, visit the Progress Design System documentation—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

• ASP.NET Core demo

• Basic Usage of the DropDownList TagHelper for ASP.NET Core (Demo)

• DropDownList in Razor Pages

See Also

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