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.

Order ID

Customer

Employee

Order Date

Required Date

Shipped Date

Ship Name

Ship Country

No records to display.

Company:

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

✨ 오늘의 명언 & 마음의 양식

DataGrid Master/Detail

“세상은 고통으로 가득하지만, 그것을 극복하는 사람들로도 가득하다.”

— 헬렌 켈러 (작가, 사회 운동가)

Demos Configuration