MultiColumnComboBox Overview

As of the Kendo UI R3 2018, the MultiColumnComboBox is available in the Kendo UI for jQuery suite. The main purpose of the widget is to visualize a big set of data in a grid-like table.

Besides the core functionality that the standard Kendo ComboBox provides such as Virtualization, Templates, Cascading functionality and various data-binding scenarios, the new widget provides a few more. It gives you the ability to define Columns that will be rendered in the dropdown (along with additional options for them) and specify against which Fields from the data source the Filter should work upon.

Getting Started

Initialize the MultiColumnComboBox

To initialize the MultiColumnComboBox, use any of the following approaches:

  1. Use the <option> tag of an existing <select> element with defined data items.
  2. Bind the widget to a local data array and use the <input> element.
  3. Bind the widget to a remote data service and use the <input> element.

The MultiColumnComboBox looks and operates consistently regardless of the initialization type you choose to apply.

Important

  • Verify that you create the MultiColumnComboBox within a $(document).ready() statement because the widget has to be initialized after the DOM fully loads.
  • The widget copies any styles and CSS classes from the input element to the wrapper element and visible input.

Columns

The MultiColumnComboBox widget provides you with the functionality to predefine the columns that needs to be rendered in the dropdown. You can also set which field from the dataItem should be populated, set a title, template, headerTemplate and width. (see API for Columns configuration in MultiColumnComboBox)

Columns Width

The widget allows you to set a dropdown width through the dropDownWidth option. In addition, the columns allows setting their width as well. That being said, the below cases for width configuration exists:

  • If all columns width are defined in pixels (through their width option) - the dropDownWidth value (if set) is disregarded.
  • In all other cases (not all of the columns width values are set), the dropDownWidth value is applied to the element.

The following example demonstrated how the widget combines its column width values, to set the dropdown width value. (dropdown will be 300px wide)

Example
<input id="multicolumncombobox" />
<script>
    $("#multicolumncombobox").kendoMultiColumnComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: "Apples", value: "1", width: 150  },
            { text: "Oranges", value: "2", width: 150 }
        ],
        columns: [
            { field: "text", title: "Text" },
            { field: "value", title: "Value" }
        ]
    });
</script>

The following example demonstrated how the widget sets the specified width for the first column and calculates the rest of the space (the set dropDownWidth - column width), in order to separate it evenly, between the rest of the columns.

Example
<input id="multicolumncombobox" />
<script>
    $("#multicolumncombobox").kendoMultiColumnComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dropDownWidth: 350,
        dataSource: [
            { text: "Apples", value: "1", subtitle: "subtitle 1", width: 150 },
            { text: "Oranges", value: "2", subtitle: "subtitle 2"},
            { text: "Kiwis", value: "3", subtitle: "subtitle 3"}
        ],
        columns: [
            { field: "text", title: "Text" },
            { field: "value", title: "Value" },
            { field: "subtitle", title: "SubTitle" }
        ]
    });
</script>

Filtering

Besides the standard filter options, the widget allows you to set fields, against which the data will be filtered. The option accepts an array of strings:

The following example demonstrated how to set filter fields

Example
<input id="multicolumncombobox" />
<script>
    $("#multicolumncombobox").kendoMultiColumnComboBox({
        dataTextField: "text",
        dataValueField: "value",
        filter: "contains",
        filterFields: ["text", "value"],
        dataSource: [
            { text: "Apples", value: "1", subtitle: "subtitle 1", width: 150 },
            { text: "Oranges", value: "2", subtitle: "subtitle 2"},
            { text: "Kiwis", value: "3", subtitle: "subtitle 3"}
        ],
        columns: [
            { field: "text", title: "Text" },
            { field: "value", title: "Value" },
            { field: "subtitle", title: "SubTitle" }
        ]
    });
</script>

Data Binding

Bind to Local Data Arrays

To initialize the MultiColumnComboBox by binding the widget to a local data array and utilizing the <input> element, use the Data Source component. It is an abstraction for local and remote data. Local arrays are appropriate for limited value options.

The following example demonstrates how to initialize the MultiColumnComboBox by using this approach.

Example
<input id="comboBox" />

<script>
  $(document).ready(function(){
    $("#comboBox").kendoMultiColumnComboBox({
      dataTextField: "text",
      dataValueField: "value",
      dataSource: [
        { text: "Item1", value: "1" },
        { text: "Item2", value: "2" }
      ],
      columns: [
            { field: "text", title: "Text" },
            { field: "value", title: "Value" }
      ]
    });
  });
</script>

Bind to Remote Data Services

To initialize the MultiColumnComboBox by binding the widget to remote data arrays and utilizing the <input> element, use the Data Source component. It is an abstraction for local and remote data. Remote data binding is appropriate for larger data sets, so that items are loaded on demand when displayed. You can use the DataSource for serving data from a variety of data services such as XML, JSON, and JSONP.

The following example demonstrates how to initialize the MultiColumnComboBox by using this approach.

Example
<input id="comboBox" />

<script>
$(document).ready(function() {
    $("#comboBox").kendoMultiColumnComboBox({
        index: 0,
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        columns: [
                { field: "ProductName", title: "ProductName" },
                { field: "ProductID", title: "ProductID" }
        ],
        dataSource: {
            transport: {
                read: {
                    dataType: "jsonp",
                    url: "https://demos.telerik.com/kendo-ui/service/Products"
                }
            }
        }
    });
});
</script>

Templates

The MultiColumnComboBox uses Kendo UI templates to provide full control over the way pop-up items are rendered.

For more information on the capabilities and syntax of the templates, refer to the documentation.

Column Templates

You can define column templates and header column templates in order to customize your layout:

Example
<input id="multicolumncombobox" />
<script>
    $("#multicolumncombobox").kendoMultiColumnComboBox({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            { text: "Apples", value: "1" },
            { text: "Oranges", value: "2" }
        ],
        columns: [
            { field: "text", template: "Cell Text: #:text#", headerTemplate: "<strong>Text</strong>"},
            { field: "value", template: "Cell Value: <strong>#:value#</strong>", headerTemplate: "<strong>Value</strong>"}
        ]
    });
</script>

Header Templates

The header template manages the way the pop-up header of a MultiColumnComboBox is rendered.

The MultiColumnComboBox allows you to render a pop-up header. The following example demonstrates how to define a header template.

Example
<input id="comboBox" />
<!-- Template -->
<script id="headerTemplate" type="text/x-kendo-template">
    <strong>Header</strong>
</script>

<!-- MultiColumnComboBox initialization -->
<script>
    $(document).ready(function() {
        $("#comboBox").kendoMultiColumnComboBox({
            headerTemplate: $("#headerTemplate").html(),
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            columns: [
                { field: "ProductName", title: "ProductName" },
                { field: "ProductID", title: "ProductID" }
            ],
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
</script>

The footer template manages the way the pop-up footer of a MultiColumnComboBox is rendered. The footer is re-rendered on every change of the Data Source. The context of the template is the widget itself.

The following example demonstrates how to define a footer template.

Example
<input id="comboBox" />
<!-- Template -->
<script id="footerTemplate" type="text/x-kendo-template">
    Total <strong>#: instance.dataSource.total() #</strong> items found
</script>

<!-- MultiColumnComboBox initialization -->
<script>
    $(document).ready(function() {
        $("#comboBox").kendoMultiColumnComboBox({
            footerTemplate: $("#footerTemplate").html(),
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            columns: [
                { field: "ProductName", title: "ProductName" },
                { field: "ProductID", title: "ProductID" }
            ],
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
</script>

No-Data Templates

The MultiColumnComboBox widget displays noDataTemplate in the popup when the data source is empty.

The following example demonstrates how to define a noDataTemplate template.

Important

When the noDataTemplate option is defined, the widget always opens the popup element.

Example
<input id="comboBox" />
<!-- Template -->
<script id="noDataTemplate" type="text/x-kendo-template">
    <strong>No Data!</strong>
</script>

<!-- MultiColumnComboBox initialization -->
<script>
    $(document).ready(function() {
        $("#comboBox").kendoMultiColumnComboBox({
            noDataTemplate: $("#noDataTemplate").html(),
            dataTextField: "ContactName",
            dataValueField: "CustomerID",
            filter: "contains",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
</script>

See Also

Other articles on the Kendo UI MultiColumnComboBox:

Articles on the Kendo UI DropDownList:

Articles on the Kendo UI MultiSelect:

Articles on the Kendo UI AutoComplete:

In this article
Not finding the help you need? Improve this article