Data Grid - Master-Detail View

The DxDataGrid component allows you to build master-detail layouts of any complexity and depth with a detail row template. This template defines the way detail data is presented.

This demo module illustrates how to use a nested grid component to visualize a master-detail relationship between two data tables. To do this, follow the steps below.

  1. Add two DxDataGrid components to your application.
  2. Bind the first grid (master) to a master data source and enable its ShowDetailRow property.
  3. Bind the second grid (detail) to a detail data source that uses the template's context object as a filter criterion.
  4. (Optional) To automatically collapse an expanded detail row when a new detail row is displayed, set the AutoCollapseDetailRow property to true.

Create a DetailRowTemplate template for the master grid and add the detail grid to this template.

Eco Max Low pollution industrial air cleaner 2500 289 11
Eco Supreme High-output air cleaner powered by solar 2000 -14 54
EnviroCare Consumer air filtration and vent system 1750 50 40
EnviroCare Max Industrial environmental control system 2800 150 13