MultiColumnComboBox provides the option to display grouped data inside the component. The current article discusses the following MultiColumnComboBox 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
groupFieldproperty sets the fields that defines the group name in each data item.
groupModeproperty determines the way the grouped data will be rendered inside the component's popup. The available groping mode are
The MultiColumnComboBox doesn't internally group the data passed to it. To use the component in a grouping scenario, you need to use the
groupBymethod available in the KendoReact DataQuery package.
The following example demonstrates the
modern grouping mode in action.
The following example demonstrates how to configure the MultiColumnComboBox in a Grouping + Filtering scenario.
Using the itemRender, groupHeaderItemRender, and groupStickyHeaderItemRender of the KendoReact MultiColumnComboBox component we can customize its
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 MultiColumnComboBox data the way your scenario needs it.