MultiColumnComboBox Overview

As of the Kendo UI R3 2018, the Kendo UI for jQuery suite delivers the MultiColumnComboBox.

The MultiColumnComboBox visualizes huge sets of data in a grid-like table. Besides the core functionality that the standard Kendo UI ComboBox provides, such as virtualization, templates, cascading functionality, and data-binding scenarios, the MultiColumnComboBox enables you to define columns that will be rendered in the drop-down (along with additional options for them) and specify against which fields from the data source the filter will apply.

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 allows you to predefine the columns that will be rendered in the drop-down. You can also set which field from the dataItem will be populated, set a title, template, headerTemplate, and width. For more information, refer to the API for the columns configuration of the MultiColumnComboBox.

Columns Width

The MultiColumnComboBox allows you to set the width of the drop-down through the dropDownWidth option. In addition, the columns also allow you to set their width.

Important

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

The following example demonstrates how to combine the column width values, set the drop-down width value, and ender a drop-down with a width of 300px in the MultiColumnComboBox.

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 to set a specific width for the first column and calculate the rest of the space (the set dropDownWidth column width) so that the space is evenly split 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 MultiColumnComboBox allows you to set fields against which the data will be filtered. The option accepts an array of strings.

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

When you configure the local or remote dataSource of the MultiColumnComboBox, enabling paging functionality and setting pageSize is efficient only when you use paging together with virtualization. In all other cases, enabling paging and setting pageSize is considered as incorrect configuration.

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 to customize the layout of your project.

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

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