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 master-detail rows.

Built-in Directive

The Grid provides a built-in directive to simplify controlling the expanded state of a master-detail row.

The kendoGridExpandDetailsBy directive automatically handles the detailCollapse and detailExpand events and provides the isDetailExpanded function to the Grid.

The directive takes the key name or a function that returns the key value for a given data item as argument. The item key will be stored in the expandedDetailKeys collection.This approach provides you with full control over the expanded details functionality—for example, it allows you to specify initially expanded items, manually update the collection, and so on.

The following example demonstrates using the directive.

Example
View Source
Change Theme:

Providing a Callback

The Grid exposes the isDetailExpanded function to control and determines if a specific master-detail row is expanded.

Example
View Source
Change Theme: