ASP.NET Core DropDownList Overview
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
- Getting Started with the DropDownList
Basic Usage of the DropDownList HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the DropDownList TagHelper for ASP.NET Core (Demo)