New to Kendo UI for Angular? Start a free 30-day trial

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.

Note that if the width property 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Styling

Each cell or header styles can be overridden 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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. 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.

Example
View Source
Edit In Stackblitz  
Change Theme: