ASP.NET Core MultiColumnComboBox Overview
The MultiColumnComboBox 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 MultiColumnComboBox TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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("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"))
)
)
<kendo-multicolumncombobox 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-multicolumncombobox>
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)
)
)
<kendo-multicolumncombobox auto-bind="false" height="400" datatextfield="ProductName" datavaluefield="ProductID" min-length="3" placeholder="Select product" filter="FilterType.Contains" name="products" style="width:100%;">
<multicolumncombobox-columns>
<column field="ProductName" title="Name" width="200px">
</column>
<column field="ProductID" title="ID" width="200px">
</column>
</multicolumncombobox-columns>
<datasource server-filtering="true">
<transport>
<read url="@Url.Action("Products_Read", "MultiColumnComboBox")" />
</transport>
</datasource>
</kendo-multicolumncombobox>
Functionality and Features
Feature | Description |
---|---|
Data Binding | The MultiColumnComboBox provides a set of options for binding it to data. |
Appearance | Customize the component appearance based on your requirements. |
Columns | The MultiColumnComboBox allows you to predefine the columns that will be rendered in its drop-down list. |
Adaptive Mode | Enable the mobile-friendly rendering of the MultiColumnComboBox popup. |
Virtualization | Configure the MultiColumnComboBox to use virtualization. |
Filtering | Enable the filtering functionality of the component. |
Grouping | Bind the MultiColumnComboBox to a grouped DataSource. |
Floating Label | Modify the rendering of the component label. |
Cascading | Use a series of two or more cascaded MultiColumnComboBoxes. |
Prefix and Suffix | Enhance the component look and feel by adding prefix and suffix adornments. |
Events | Handle the component events and implement any custom functionality. |
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. |
Templates | The MultiColumnComboBox provides capability to fully customize the content presented to the user. |
Next Steps
- Getting Started with the MultiColumnComboBox
Basic Usage of the MultiColumnComboBox HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the MultiColumnComboBox TagHelper for ASP.NET Core (Demo)
- MultiColumnComboBox in Razor Pages