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

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 the built-in kendoGridExpandGroupBy directive to simplify controlling the expanded state of group rows.

Default Configuration

The kendoGridExpandGroupBy directive automatically handles the groupCollapse and groupExpand events and provides the default 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:

  • fieldThe field property value of the current group item.
  • valueThe value property value of the current group item.
  • parentGroupKeysAn 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 group.

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 must either be cleared or each item's parent group keys updated.

The following example demonstrates using the directive.

Example
View Source
Change Theme:

Custom Group Key Format

To override the default key persistence format, provide to the kendoGridExpandGroupBy directive selector a callback that accepts a GroupRowArgs object as a single argument and returns a unique primitive value key.

Example
View Source
Change Theme:

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:

Example
View Source
Change Theme:

Providing a Callback

The Grid exposes the isGroupExpanded function to control the expanded state of each group row.

The isGroupExpanded function takes precedence both over the default grouping behavior and over any possibly configured group option.

Example
View Source
Change Theme:

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:

Example
View Source
Change Theme: