Master-Detail View

Maria Anders Alfreds Futterkiste Berlin Germany
Ana Trujillo Ana Trujillo Emparedados y helados México D.F. Mexico
Antonio Moreno Antonio Moreno Taquería México D.F. Mexico
Thomas Hardy Around the Horn London UK

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.

  1. Add the master grid to your application.
  2. Bind the master grid to data and enable its ShowDetailRow property to display detail rows.
  3. Add the master grid's columns to the Columns collection.
  4. 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.
  5. (Optional) To collapse an expanded detail row when a new detail row is displayed, set the AutoCollapseDetailRow property to true.
  6. Specify the key data field to enable the Data Grid to identify individual data items.

YouTube Video: Master-Detail Layout