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.

If the width property of all columns is not set, the component will assume as its popup width either the explicitly provided popup width through the popupSettings component, 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

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:

  • styleApplies the provided styles to the column cells.
  • headerStyleApplies the provided styles to the column header.
  • classApplies the provided class to the column cells.
  • headerClassApplies 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. 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.

Example
View Source
Edit In Stackblitz  
Change Theme: