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>

    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

See Also

In this article