ASP.NET MVC ComboBox Overview
The ComboBox 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 ComboBox HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI ComboBox widget.
The ComboBox displays a list of values and allows for a single selection from the list.
Initializing the ComboBox
The following example demonstrates how to define the ComboBox.
@(Html.Kendo().ComboBox()
.Name("combobox")
.DataTextField("ProductName")
.DataValueField("ProductID")
.DataSource(source => {
source.Read(read =>
{
read.Action("Products_Read", "ComboBox");
});
})
)
public class ComboBoxController : 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 following example demonstrates the basic configuration of the ComboBox.
@(Html.Kendo().ComboBox()
.Name("combobox")
.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 ComboBox is used to get its client-side instance.
var combobox = $("#combobox").data("kendoComboBox");
console.log(combobox);
});
</script>
Functionality and Features
| Feature | Description |
|---|---|
| Binding | You can bind the ComboBox to local arrays of data and to remote data services. |
| Appearance | You can customize the appearance of the ComboBox by configuring its size, fill mode, and border radius. |
| Grouping | In the ComboBox, you can display data items that are grouped by a specific model field. |
| Virtualization | The built-in virtualization of the ComboBox allows you to display large datasets. |
| Filtering | You can display only a subset of the available data by using the server-side filtering of the ComboBox. |
| Templates | To take full control over the rendering of the ComboBox items, popup header, and popup footer, you can use the available templates. |
| Cascading | You can use a series of two or more cascaded ComboBoxes. |
| Accessibility | The ComboBox is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support. |