Vue Data Grid

Master / Detail - Detail Grids

vue logo
Enterprise

When a row in the Master Grid is expanded, a new Detail Grid appears underneath that row. This page describes configuration options relevant to the Detail Grid.

This page explains how to configure the Detail Cell Renderer using the detailCellRendererParams Grid Option and how you can interact with the Detail Grids using the Master Grid's API.

The Detail Grid fits inside one row of the Master Grid without using any of the Master Grid's columns. It is the job of the Detail Cell Renderer to draw the Detail Grid into the provided detail row.

Detail Grid Definition

The Detail Grid is a fully fledged independent grid instance. This means that the Detail Grid has access to the full range of grid features.

The instance of the grid is instantiated using native JavaScript and not any particular framework. This means properties are provided via a plain JavaScript object called Grid Options and not bound by any framework or HTML tags or bindings.

The Grid Options JSON is provided to the Detail Grid using the parameter detailGridOptions.

The example below shows configuring a Detail Grid with some additional Grid Options set. Note the following:

  • The detailGridOptions is provided inside the detailCellRendererParams.
  • The Detail Grid Options has the following properties set: rowSelection=multiple, suppressRowClickSelection=true, enableRangeSelection=true, pagination=true and paginationAutoPageSize=true.
  • The Detail Grid Options is provided with a Default Column Definition (defaultColDef) that makes all columns use Flex for sizing.
  • The first Column Definition is configured to use Checkbox Selection.

Providing Rows

Row data is provided to the Detail Grid by implementing the getDetailRowData callback of the Detail Cell Renderer Params. The interface of this callback is as follows: