Controlling the Expanded State
The Grid enables you to define and persist the expanded state of its groups and their hierarchical structure.
Built-in Directive
The Grid provides a built-in directive to simplify controlling the expanded state of a group row.
Default Configuration
The kendoGridExpandGroupBy directive automatically handles the groupCollapse and groupExpand events and provides the isGroupExpanded function to the Grid.
By default, the directive will store a collection of GroupKey items for each expanded group. Each GroupKey holds the following properties:
field
—thefield
property value of the current group itemvalue
—thevalue
property value of the current group itemparentGroupKeys
—an array of{ field: string, value: any }
items indicating all parent groups of the current one, staring from the direct parent group all the way to the root level one
As the expandedGroupKeys collection includes the paths to the parent groups, when the groupChange event is fired, some of the group keys may no longer be valid, as the paths to the parent groups may have changed. To avoid any unexpected behavior, the expandedGroupKeys collection should either be cleared, or each item's parent group keys have to be updated.
The following example demonstrates using the directive.
Custom Group Key Format
To override the default key persistence format, provide to the kendoGridExpandGroupBy directive selector a callback which accepts as a single parameter a GroupRowArgs object and returns a unique primitive value key.
Expand and Collapse All Groups
Use the kendoGridExpandGroupBy
directive and its groupsInitiallyExpanded
option to expand or collapse all group rows in one go. To do so, reset the expandedGroupKeys
collection and set groupsInitiallyExpanded
to the respective value.
The following example demonstrates this approach:
Providing a Callback
The Grid exposes the isGroupExpanded function to control and determine if a specific group row is expanded.
Expand and Collapse All Groups via Callback
The isGroupExpanded
callback allows you to implement custom logic for expanding or collapsing all groups in one go when the kendoGridExpandGroupBy
directive is not applied. To do so, reset the collection of expanded groups, and toggle a boolean flag indicating all groups are expanded or collapsed. The isGroupExpanded
callback can then use this information to return the respective value when all groups need to be expanded/collapsed.
The following example demonstrates this approach: