Grouping

The KendoReact ComboBox provides the option to display grouped data inside the component. The current article discusses the following Combobox Grouping scenarios:

• Basic usage and differences between the two grouping modes available for the component
• Grouping with filtering
• Customization of the different popup elements when working with grouped data

Basic Usage

To configure the data grouping in the ComboBox component you need to define the groupField and groupMode properties.

• The groupField property sets the fields that defines the group name in each data item.
• The groupMode property determines the way the grouped data will be rendered inside the component's popup. The available groping mode are modern and classic (Since version 6.0.0 of the KendoReact components, the default value of the groupMode property is changed from classic to modern.

The Grouping functionality has the following specifics:

1. ComboBox doesn't internally group the data passed to it. To use the component in a grouping scenario, you need to use the groupBy method available in the KendoReact DataQuery package.
2. Data that can't be grouped is not visualized in the component - the ComboBox internally filters the data items that doesn't have the field that is set as a groupField.

The following example demonstrates the modern grouping mode in action.

Grouping with Filtering

The following example demonstrates how to configure the ComboBox in a Grouping + Filtering scenario.

Grouping Customization

Using the itemRender, groupHeaderItemRender, and groupStickyHeaderItemRender of the KendoReact ComboBox component we can customize its data items, group headers, and the 'sticky' header that displays the top-most group that is currently being scrolled.

By customizing the templates passed to each of the listed above properties you can modify the grouped ComboBox data the way your scenario needs it.

Suggested Links

• API Reference of the ComboBox
• API Reference of the ComboBoxProps