Vladimir Enchev, April 27, 2017

Master/Detail with two grids, Angular and Radzen

Using Radzen you can create master/detail with two grids in three easy steps:

  1. Drop DataGrid component to Radzen design surface, bind it to your first table (in my case Orders from Northwind OData service) and auto-generate columns image Bind first DataGrid to Orders

  2. Define select event for the DataGrid component to invoke Order Details with filter OrderID eq ${event.OrderID} and set a property orderDetails to the result value image Invoke Order Details and set property value

  3. Drop second DataGrid component to Radzen design surface, bind it to orderDetails property and auto-generate columns image Bind second DataGrid to Order Details

  4. Run the application to check Order details for the selected Order image Order Details for selected Order

Enjoy!

© 2016-2025 Radzen Ltd. All Rights Reserved.
Designed and developed with ❤️ in Radzen Blazor Studio.

Select theme:

Material 3