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 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.
@(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>
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—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
- Basic Usage of the DropDownList HtmlHelper for ASP.NET MVC (Demo)