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

Grouping

The Kendo UI for Vue Native AutoComplete provides the option to display grouped data inside the component. The current article discusses the following AutoComplete Grouping scenarios:

Basic Usage

To configure the data grouping in the AutoComplete component you need to define the groupField. The groupField property sets the fields that defines the group name in each data item.

The AutoComplete 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 Kendo UI for Vue Native DataQuery package.

The following example demonstrates the AutoComplete data grouping in action.

Example
View Source
Change Theme:

Grouping with Filtering

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

Example
View Source
Change Theme:

Grouping Customization

Using the itemRender, groupHeaderItemRender, and groupStickyHeaderItemRender of the Kendo UI for Vue Native 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.

Example
View Source
Change Theme: