Blazor Master Detail Grid Example
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Master Grid
Customer Name | Company Name | Address | Country |
|---|
| Thomas Hardy | Around the Horn | 120 Hanover Sq. | UK |
| Christina Berglund | Berglunds snabbköp | Berguvsvägen 8 | Sweden |
| Frédérique Citeaux | Blondesddsl père et fils | 24, place Kléber | France |
| Yang Wang | Chop-suey Chinese | Hauptstr. 29 | Switzerland |
| Roland Mendel | Ernst Handel | Kirchgasse 6 | Austria |
Showing orders of Customer:
Order ID | Ship Name | Ship Country | Ship Address |
|---|
| 11 | Blondel père et fils | France | 24, place Kléber |
| 12 | Blondel père et fils | France | 24, place Kléber |
| 13 | Blondel père et fils | France | 24, place Kléber |
| 14 | Blondel père et fils | France | 24, place Kléber |
| 15 | Blondel père et fils | France | 24, place Kléber |
This sample demonstrates the Master-Detail DataGrid pattern for displaying hierarchical record relationships.
The Master-Detail DataGrid scenario enables you to visualize details of a master record in a separate detail DataGrid. Simply click a row in the master grid to populate the detail grid with corresponding information.
To implement this pattern:
- Capture the selected record from the master DataGrid using the
RowSelectedevent - Filter the detail datasource based on the selected master record
- Bind the filtered data to the detail DataGrid
DataSourceproperty
In this demo, clicking any row in the master DataGrid automatically populates the detail DataGrid with the corresponding related records.
Looking for the full Blazor DataGrid component overview, features, pricing, and documentation? Visit our Blazor DataGrid component page.