Nested Grid

Contact Name Company Name Country City
Alejandra Camino Romero y tomillo Spain Madrid
Alexander Feuer Morgenstern Gesundkost Germany Leipzig
Ana Trujillo Ana Trujillo Emparedados y helados Mexico México D.F.
Anabela Domingues Tradição Hipermercados Brazil Sao Paulo
André Fonseca Gourmet Lanchonetes Brazil Campinas
Ann Devon Eastern Connection UK London
Annette Roulet La maison d'Asie France Toulouse
Antonio Moreno Antonio Moreno Taquería Mexico México D.F.
Aria Cruz Familia Arquibaldo Brazil Sao Paulo
Art Braunschweiger Split Rail Beer & Ale USA Lander
of 10

The DevExpress Blazor Grid component allows you to create 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 replicate the capabilities of this demo, follow the steps below:

  1. Add a master grid to your application.
  2. Bind the master grid to data and add columns to its Columns collection.
  3. Add the DetailRowTemplate to the grid's markup to create a detail view.
  4. (Optional) We recommend that you allocate the detail grid to a separate component. Separation improves app structure and prevents excessive component redraw operations.
  5. Add a second data grid to the template. Bind this 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 on-screen, set the AutoCollapseDetailRow property to true.