Master-Detail View

The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

Contact Name
Company Name
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. Add the DetailRowTemplate template to the grid's markup to create the detailed view. Specify the template's context parameter to access data item properties.
  5. Add the second data grid to the template. Bind the grid to a detail data source that uses the template's context object as a filter criteria.
  6. (Optional) To collapse an expanded detail row when a new detail row is displayed, set the AutoCollapseDetailRow property to true.
  7. Specify the key data field to enable the grid to identify individual data items.