ASP.NET Core MultiColumnComboBox Overview

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.

• Demo page for the MultiColumnComboBox HtmlHelper

• Demo page for the MultiColumnComboBox TagHelper

Initializing the MultiColumnComboBox

The following example demonstrates how to define the MultiColumnComboBox.

Razor

    @(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"))
          )
    )

Razor

    <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>

C#

    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.

Razor

    @(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)
        )
    )

Razor

     <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

See Also

• Using the API of the MultiColumnComboBox for ASP.NET Core (Demo)
• Knowledge Base Section