Master-Detail Grids

The Grid provides options for visualizing the relations between its parent and child records by displaying the table data in a hierarchical order.

To apply a hierarchical order to the desired records, use the detail template feature of the master Kendo UI Grid for Angular. The feature allows you to load the detail component which contains the corresponding child Grid records that are filtered by the parent key field value.

Change Theme

Theme

Loading ...

Keyboard Navigation

To enable keyboard navigation in a master-detail Grid:

1. Apply the kendoGridFocusable directive to the detail Grids.
2. Set [navigable]="true" to the master and detail Grids.

ts

@Component({
    selector: 'category-details',
    template: `
      <kendo-grid
          ...
        [navigable]="true"
        kendoGridFocusable
      >
    `,
    ...
})

In detail templates, the Grid supports the following keyboard shortcuts:

SHORTCUT	DESCRIPTION
Enter on a +/- cell	Expands or collapses the detail template.
Enter on a detail cell	Disables the keyboard navigation of the parent Grid and transfers the control to the detail Grid.
Escape	Restores the keyboard navigation of the parent Grid and moves the focus to the detail cell.

Suggested Links

• DetailTemplateDirective
• Keyboard Navigation
• API Reference of the GridComponent
• API Index of the Grid