Blazor Master Detail Grid Example
This sample demonstrates the usage of DataGrid to visualize details of record in another DataGrid in master and detail manner. By simply clicking the master DataGrid row, the detail DataGrid will be populated with the corresponding data.
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 |
The Master-Detail DataGrid is a use case scenario in which the details of a Master DataGrid record are displayed in a separate DataGrid (Detail DataGrid) by clicking on the specific row.
The steps to achieve this scenario is as follows,
- Get the selected record of Master DataGrid in the
RowSelectedevent. - Filter the data based on the selected record and bind the result to the Detail DataGrid
DataSourceproperty.
In this demo, simply click the row in master DataGrid, which shows the details in another(Detail) DataGrid.