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 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
An error has occurred. This application may no longer respond until reloaded. Reload 🗙