Columns
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.
Basic Configuration
To extract the desired text values from each data item, provide to the corresponding kendo-combobox-column field and 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.
If the
widthproperty of all columns is not set, the component will assume as its popup width either the explicitly provided popup width through thepopupSettingscomponent, or the width of the MultiColumnComboBox wrapper element. Then, the available space will be distributed equally between all rendered columns.
Styling
You can override each cell or header style directly through the kendo-combobox-column configuration.
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.
Responsive Design
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.
