Grouping
The KendoReact AutoComplete provides the option to display grouped data inside the component. The current article discusses the following AutoComplete 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 AutoComplete component you need to define the groupField.
- The
groupFieldproperty sets the fields that defines the group name in each data item.
The Grouping functionality has the following specifics:
- AutoComplete 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.- Data that can't be grouped is not visualized in the component - the AutoComplete internally filters the data items that doesn't have the field that is set as a
groupField.
The following example demonstrates the AutoComplete data grouping in action.
Grouping with Filtering
The following example demonstrates how to configure the AutoComplete in a Grouping + Filtering scenario.
Grouping Customization
Using the itemRender, groupHeaderItemRender, and groupStickyHeaderItemRender of the KendoReact AutoComplete 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 AutoComplete data the way your scenario needs it.
