This page demonstrates how to create a master/detail relationship between two Radzen Blazor DataGrid components.
In this demo the master Orders grid on the left shows selected order's customer company name above, while the detail panel on the right displays Order Details grid and Products data list in tabs, with the first order pre-selected.
Order IDfilter_alt | Customerfilter_alt | Employeefilter_alt | Order Datefilter_alt | Required Datefilter_alt | Shipped Datefilter_alt | Ship Namefilter_alt | Ship Countryfilter_alt |
|---|---|---|---|---|---|---|---|
| 10248 | Vins et alcools Chevalier | 07/04/2023 | 08/01/2023 | 07/16/2023 | Vins et alcools Chevalier | France | |
| 10249 | Toms Spezialitäten | 07/05/2023 | 08/16/2023 | 07/10/2023 | Toms Spezialitäten | Germany | |
| 10250 | Hanari Carnes | 07/08/2023 | 08/05/2023 | 07/12/2023 | Hanari Carnes | Brazil | |
| 10251 | Victuailles en stock | 07/08/2023 | 08/05/2023 | 07/15/2023 | Victuailles en stock | France | |
| 10252 | Suprêmes délices | 07/09/2023 | 08/06/2023 | 07/11/2023 | Suprêmes délices | Brazil |
Orderfilter_alt | Productfilter_alt | Unit Pricefilter_alt | Quantityfilter_alt | Discountfilter_alt |
|---|---|---|---|---|
| VINET | Queso Cabrales | $14.00 | 12 | 0% |
| VINET | Singaporean Hokkien Fried Mee | $9.80 | 10 | 0% |
| VINET | Mozzarella di Giovanni | $34.80 | 5 | 0% |
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT