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
|
City
|
Country
|
|
|---|---|---|---|---|
| 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 |
of 23
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.
- Add the DetailRowTemplate template to the grid's markup to create the detailed view. Specify the template's
contextparameter to access data item properties. - Add the second data grid to the template. Bind the grid to a detail data source that uses the template's
contextobject as a filter criteria. - (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 grid to identify individual data items.