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.
- Add two Data Grid components to your application.
- Bind the first grid (master) to a master data source and enable its ShowDetailRow property.
- Bind the second grid (detail) to a detail data source that uses the template's context object as a filter criterion.
- (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|