ASP.NET MVC DropDownList Overview
The DropDownList is part of Telerik UI for ASP.NET MVC, 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 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.
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");
});
})
)
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("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_Read2", "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>
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 MVC (Demo)