ASP.NET Core DropDownList Overview

Telerik UI for ASP.NET Core Ninja image

The DropDownList 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 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.

Initializing the DropDownList

The following example demonstrates how to define the DropDownList.

    @(Html.Kendo().DropDownList()
        .Name("dropdownlist")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .DataSource(source => {
            source.Read(read =>
            {
                read.Action("Products_Read", "DropDownList");
            });
        })
    )
    <kendo-dropdownlist name="dropdownlist"
                    datatextfield="ProductName"
                    datavaluefield="ProductID">
    <datasource>
        <transport>
            <read url="@Url.Action("Products_Read", "DropDownList")" />
        </transport>
    </datasource>
</kendo-dropdownlist>

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

Basic Configuration

The DropDownList configuration options are passed as attributes.

    @(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"))
          )
    )
    <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>
    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.1, and keyboard support.

Next Steps

See Also

In this article