The MultiColumnComboBox renders table-structured data in its popup. To define and configure the displayed columns, define a
kendo-combobox-column for each desired column.
To extract the desired text values from each data item, provide to the corresponding
title values. The
field value will be used to extract the text content for each table cell, while the
title value will be rendered in the corresponding column header.
Additionally, define the
width property value of each column, to get the desired text to render fully.
Note that if the
widthproperty of all columns is not set, the component will assume as popup width either the explicitly provided popup width through the component
popupSettings, or the width of the MultiColumnComboBox wrapper element. Then, the available space will be distributed equally between all rendered columns.
Each cell or header styles can be overridden directly through the
The column component provides options for style customizations through the following options:
style- applies the provided styles to the column cells
headerStyle- applies the provided styles to the column header
class- applies the provided class to the column cells
headerClass- applies the provided class to the column header
To customize the cell or header content, use cell and header templates. For more information, refer to the dedicated article on templates.
The MultiColumnComboBox is designed to display detailed table-structured data. While this presentation format works well for larger device screens, it may not be suitable for smaller or mobile devices. One possible approach to tackle this problem is to display multiple columns on larger devices and only a single column on small resolution devices.
To define the rules which columns should be displayed at certain resolutions, you can assign a
media value to each column.