Data Grid - Master-Detail View

The Data Grid 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 Data Grid 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 $2,500.00 289 11
Eco Supreme High-output air cleaner powered by solar $2,000.00 -14 54
EnviroCare Consumer air filtration and vent system $1,750.00 50 40
EnviroCare Max Industrial environmental control system $2,800.00 150 13