ASP.NET Core MultiColumnComboBox Overview

Telerik UI for ASP.NET Core Ninja image

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

See Also

In this article