ASP.NET Core ComboBox Overview
The ComboBox 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 ComboBox TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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");
});
})
)
<kendo-combobox name="combobox"
datatextfield="ProductName"
datavaluefield="ProductID">
<datasource>
<transport>
<read url="@Url.Action("Products_Read", "ComboBox")"/>
</transport>
</datasource>
</kendo-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("products")
.Placeholder("Select product")
.DataTextField("ProductName")
.DataValueField("ProductID")
.HtmlAttributes(new { style = "width:100%;" })
.Filter(FilterType.Contains)
.AutoBind(false)
.MinLength(3)
.DataSource(source => source
.Read(read => read.Action("GetProducts", "Home"))
)
)
@addTagHelper *, <<Your Project Name Goes Here>>
<kendo-combobox name="products" filter="FilterType.Contains"
placeholder="Select product"
datatextfield="ProductName"
datavaluefield="ProductID"
auto-bind="false"
min-length="3" style="width: 100%;">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("GetProducts", "Home")" />
</transport>
</datasource>
</kendo-combobox>
public JsonResult GetProducts()
{
return new JsonResult(new[] { new { ProductName = "ProductName 1", ProductID = 1} });
}
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. |
Next Steps
- Getting Started with the ComboBox
Basic Usage of the ComboBox HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the ComboBox TagHelper for ASP.NET Core (Demo)