Blazor Master Detail Grid Example
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.