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>
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. |
| 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 Core (Demo)
Basic Usage of the MultiColumnComboBox TagHelper for ASP.NET Core (Demo)
- MultiColumnComboBox in Razor Pages