Radzen blog

Rapid application development for Angular

Master/Detail with two grids, Angular and Radzen

Published on by

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 master-detail-two-grids1.png 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 master-detail-two-grids2.png 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 master-detail-two-grids3.png Bind second DataGrid to Order Details

  4. Run the application to check Order details for the selected Order master-detail-two-grids4.png Order Details for selected Order

Enjoy!

radzen.png

Radzen is a rapid application development solution for Angular. Create modern web apps without writing HTML, CSS or JavaScript. Connect them to your REST API, OData service or MS SQL Server.

Try it for free now!