The Data Grid component allows you to build hierarchical layouts of any complexity and depth. 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 the master grid to your application.
- Bind the master grid to data and enable its ShowDetailRow property to display detail rows.
- Add the master grid's columns to the Columns collection.
- Create the detailed view. Add the second data grid to the master grid's DetailRowTemplate and bind this grid to a detail data source that uses the template's context object as a filter criterion.
- (Optional) To collapse an expanded detail row when a new detail row is displayed, set the AutoCollapseDetailRow property to true.
- Specify the key data field to enable the Data Grid to identify individual data items.
YouTube Video: Master-Detail Layout