ASP.NET MVC MultiColumnComboBox Overview
The MultiColumnComboBox 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 MultiColumnComboBox HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI MultiColumnComboBox widget.
The MultiColumnComboBox visualizes large sets of data in a grid-like table.
Initializing the MultiColumnComboBox
The following example demonstrates how to define the MultiColumnComboBox.
@(Html.Kendo().MultiColumnComboBox()
.Name("multicolumncombobox")
.Placeholder("Select product")
.DataTextField("ProductName")
.DataValueField("ProductID")
.Columns(columns =>
{
columns.Add().Field("ProductName").Title("Product Name").Width("200px")
columns.Add().Field("ProductID").Title("Product ID").Width("200px");
})
.Filter(FilterType.StartsWith)
.DataSource(source => {
source.Read(read =>
{
read.Action("Products_Read", "MultiColumnComboBox");
})
.ServerFiltering(true);
})
)
public class MultiColumnComboBoxController : Controller
{
public IActionResult Index()
{
return View();
}
public JsonResult Products_Read(string text)
{
var result = GetProducts();
if (!string.IsNullOrEmpty(text))
{
result = result.Where(p => p.ProductName.Contains(text)).ToList();
}
return Json(result);
}
private static IEnumerable<ProductViewModel> GetProducts()
{
var result = Enumerable.Range(0, 50).Select(i => new ProductViewModel
{
ProductID = "" + i,
ProductName = "Product " + i
});
return result;
}
}
Basic Configuration
The following example demonstrates the basic configuration of the MultiColumnComboBox.
@(Html.Kendo().MultiColumnComboBox()
.Name("multicolumncombobox")
.Placeholder("Select product")
.DataTextField("ProductName")
.DataValueField("ProductID")
.Columns(columns =>
{
columns.Add().Field("ProductName").Title("Product Name").Width("200px")
columns.Add().Field("ProductID").Title("Product ID").Width("200px");
})
.HtmlAttributes(new { style = "width:100%;" })
.Filter("contains")
.AutoBind(true)
.MinLength(3)
.Height(400)
.DataSource(source => source
.Read(read => read.Action("Products_Read", "MultiColumnComboBox"))
.ServerFiltering(true)
)
)
Functionality and Features
| Feature | Description |
|---|---|
| Data binding | The MultiColumnComboBox provides a set of options for binding it to data. |
| Columns | The MultiColumnComboBox allows you to predefine the columns that will be rendered in its drop-down list through the dropDownWidth option. |
| Filtering | Apart from the standard filter options, the MultiColumnComboBox allows you to set fields against which the data will be filtered. |
| Virtualization | You can configure a MultiColumnComboBox to use virtualization. |
| Accessibility | The MultiColumnComboBox is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support. |
| Cascading | The cascading MultiColumnComboBox is a series of two or more MultiColumnComboBoxes in which each MultiColumnComboBox is filtered according to the selected options that are based on the DataValueField in the previous MultiColumnComboBox. |
Next Steps
- Getting Started with the MultiColumnComboBox
- Basic Usage of the MultiColumnComboBox HtmlHelper for ASP.NET MVC (Demo)