The Kendo UI for Vue Native DropDownList provides the option to display grouped data inside the component. The current article discusses the following DropDownList Grouping scenarios:
- Basic usage of the grouping functionality
- Grouping with filtering
- Customization of the different popup elements when working with grouped data
To configure the data grouping in the DropDownList component you need to define the
groupField property sets the field that defines the group name in each data item.
The DropDownList 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 Kendo UI for Vue Native DataQuery package.
The following example demonstrates the
DropDownList data grouping in action.
The following example demonstrates how to configure the DropDownList in a Grouping + Filtering scenario.
Using the itemRender, groupHeaderItemRender, and groupStickyHeaderItemRender of the Kendo UI for Vue Native DropDownList 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 DropDownList data the way your scenario needs it.