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

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.

Example
View Source
Change Theme:

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

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

SHORTCUTDESCRIPTION
Enter on a +/- cellExpands or collapses the detail template.
Enter on a detail cellDisables the keyboard navigation of the parent Grid and transfers the control to the detail Grid.
EscapeRestores the keyboard navigation of the parent Grid and moves the focus to the detail cell.

In this article

Not finding the help you need?