Grid for Blazor - How to add a nested Grid to create a master-detail layout

The DevExpress Blazor Grid component allows you to create hierarchical layouts of any complexity and depth. This example demonstrates how to use a nested grid component to visualize a master-detail relationship between two data tables.

Overview

Follow the steps below to add a detail grid to implement a nested layout:

1. Add a master Grid to a page. Bind the Grid to data and populate it with columns.

2. Place a detail Grid in a separate component. Bind this Grid to data and populate it with columns.

3. Add DetailRowTemplate to the master Grid's markup. In the template, declare a component that displays the detail Grid. Use the template's context object to filter the detail Grid's data.

4. Set the master Grid's AutoCollapseDetailRow property to true to collapse the expanded detail row once a user expands another detail row.

Files to Review

• Index.razor
• Grid_MasterDetail_NestedGrid_DetailContent.razor
• Program.cs
• Customer.cs
• Invoice.cs
• NorthwindContext.cs

Documentation

• Examples

More Examples

• Grid for Blazor - How to implement cascading combo boxes