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.
widthproperty of all columns is not set, the component will assume as its popup width either the explicitly provided popup width through the
popupSettingscomponent, or the width of the MultiColumnComboBox wrapper element. Then, the available space will be distributed equally between all rendered columns.
You can override each cell or header style 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. A possible approach to handle this issue is to display multiple columns on larger devices and only a single column on small resolution devices.
To set the rules defining which columns will be displayed at certain resolutions, assign a
media value to each column.