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||$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|