# Master-Detail Grids

The [Angular Grid](https://www.telerik.com/kendo-angular-ui/components/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](https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/detail-template) 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.

The following example demonstrates a master-detail Grid with hierarchical data.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/master-detail/hierarchy/source.txt)

## 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](https://www.telerik.com/kendo-angular-ui/components/grid/api/detailtemplatedirective)
* [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation)
* [API Reference of the GridComponent](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui/components/grid/api)