Save $100 with our Black Friday deals!

Get $100 OFF with promo code BLACKFRIDAY2024 at checkout until November 30.

See Pricing

Still using Radzen Studio?
Achieve more with Radzen Blazor Studio

Radzen Blazor Studio is our new flagship product and vision of how rapid Blazor application development should be done.

Go to Radzen Blazor Studio →

Hierarchy Master and Detail with two DataGrid components

This guide demonstrates how to create two DataGrid hierarchy master/detail CRUD pages using Northwind Customers/Orders.

Quick video

Source Code

Step by step

1. Create new application with .NET server-side project and add new MSSQL data-source connected to Northwind database.

2. Start Create New Page wizard, select Master/Detail Hierarchy template, choose Customer for Page Schema and Orders for Child Data.

3. Run the application and expand customer

Overview
Installation
Quickstart
Roadmap
Fundamentals
Concepts
Properties
Components
Expressions
Data formatting
Templates
Event handling
Invoke custom method
Query builder
Architecture
Customizing the generated code
Run with Visual Studio
Design time
Introduction
Design application
Working with Pages
Working with Components
Working with Layouts
Theme Customization
Premium Themes
Debugging
Troubleshooting
Progressive Web Apps
Migrating from LightSwitch
Security and Authorization
Overview
Custom security password policy
API
Get current user
Extend application user
Multi-tenancy
Active Directory Support
Windows Security Support
Azure AD Support
Azure AD B2C Support
Internationalization (i18n)
Deploy
IIS
FTP
ZIP
Azure
Manual Build and Deploy
Application Settings
Create a complete application
Introduction
Create the database
Customize security
Customize CRUD pages
Create dashboard
Finishing touches
Create pages from data
MS SQL Server
MySQL
PostgreSQL
Oracle
OData
Swagger
Microsoft LightSwitch OData
MS Graph
Microsoft Dynamics 365
Consume REST service
Create pages manually
Create data items
Edit data items
Delete data items
Angular Components
Accordion
Autocomplete
Button
Card
Chart
CheckBox
CheckBoxList
CompareValidator
DataGrid
DataList
DatePicker
DropDown
DropDownDataGrid
Fieldset
FileInput
Gauge
GoogleMap
Gravatar
Image
Icon
Link
LengthValidator
Heading
Form
HTML
Label
ListBox
Login
Mask
Numeric
NumericRangeValidator
Panel
Password
PickList
ProgressBar
RadioButtonList
RequiredValidator
Rating
SelectBar
Signature
Slider
Sparkline
SplitButton
Steps
Scheduler
SSRSViewer
Tabs
TemplateForm
TextBox
TextArea
Tree
TreeGrid
Upload
Blazor Components
Get Started
Accordion
Autocomplete
Button
SplitButton
Card
Chart
CheckBox
CheckBoxList
ColorPicker
CustomComponent
Dialog
Grid (legacy)
DataGrid
DataList
Pager
DatePicker
DropDown
DropDownDataGrid
Fieldset
FileInput
Gauge
Gravatar
GoogleMap
Image
Icon
Link
Heading
HTML
HtmlEditor
Label
ListBox
Menu
ProfileMenu
PanelMenu
ContextMenu
Login
Notification
Tooltip
Numeric
Panel
Password
ProgressBar
RadioButtonList
Rating
Scheduler
SelectBar
Slider
Steps
SSRSViewer
Splitter
Switch
Tabs
TemplateForm
TextBox
TextArea
Mask
Tree
Upload
How To
Customize navigation menu
Custom component
Date range filter
Default filter value for DataGrid column
Stored procedure default parameter value
Copy and download file when deploying application
Extend model with additional property
Filter by multiple fields as you type
Apply DataGrid sort and filter on export
Custom DataGrid paging
Hierarchy Master and Detail DataGrid
Master and Detail DataGrid
Many-to-many CRUD
What's new