DataGrid Master/Detail

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.

Example
Edit Source

Order ID

Customer

Employee

Order Date

Required Date

Shipped Date

Ship Name

Ship Country

No records to display.

Company:

Order Details
Products

Order Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Product Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Unit Price Filter Equals Equals Not equals Less than Less than or equals Greater than Greater than or equals Is null Is not null Custom And And Or Equals Equals Not equals Less than Less than or equals Greater than Greater than or equals Is null Is not null Custom	Quantity Filter Equals Equals Not equals Less than Less than or equals Greater than Greater than or equals Is null Is not null Custom And And Or Equals Equals Not equals Less than Less than or equals Greater than Greater than or equals Is null Is not null Custom	Discount Filter Equals Equals Not equals Less than Less than or equals Greater than Greater than or equals Is null Is not null Custom And And Or Equals Equals Not equals Less than Less than or equals Greater than Greater than or equals Is null Is not null Custom

All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Start Free See Subscription Plans

CRUD Operations and Data Management

Seamless Integration

Digital Transformation and Modernization

Design Systems and Consistency

From Prototyping to Production

Time to Market Reduced

Empower the Next Generation

DataGrid Master/Detail

Save Hours on Every Project

Demos Configuration