[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Collapse]Grid View
   [Expand]Product Information
    Getting Started
   [Expand]Fundamentals
   [Collapse]Concepts
    [Expand]Binding to Data
    [Expand]Data Representation Basics
    [Expand]Focus and Navigation
    [Expand]Data Editing
    [Expand]Data Shaping and Manipulation
    [Expand]Data Formatting
    [Collapse]Master-Detail Relationship
      Master-Detail: Implementation
      Expanding and Collapsing Detail Rows
     Appearance Customization
     Adaptivity
     Save and Restore Layout
    [Expand]Templates
    [Expand]Export
     Toolbars
    [Expand]ASPxGridLookup
    ASPxGridView Designer
   [Expand]Visual Elements
   [Expand]Examples
   [Expand]Member Tables
   [Expand]ASPxGridView - Animated Images
  [Expand]Tree List
  [Expand]Card View
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Gauges
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Master-Detail: Implementation

This topic describes how to use the ASPxGridView control to display master-detail data.

  1. Retrieve Data From a Database
  2. Create Master and Detail ASPxGridViews
  3. Set up Master-Detail Relationship

Expanded 1. Retrieve Data From a Database

The grid obtains its data from the Categories and Products tables in the NWind database. The Categories and Products tables are the master and detail tables, respectively. A master-detail relationship is established through the CategoryID field.

To retrieve data from the database, use the AccessDataSource components:

  • Master: Categories

  • Detail: Products. Define a filter rule (see the image below).

Expanded 2. Create Master and Detail ASPxGridView

Create two ASPxGridView controls. Bind the first grid (master) to the dsCategories. Bind the second grid (detail) to the dsProducts. Specify data source key fields for both grids using their ASPxGridBase.KeyFieldName property.

Expanded 3. Set up a Master-Detail Relationship

Invoke ASPxGridView's Template Designer by clicking the Edit Templates task. Select the DetailRow template.

Drag the detail grid onto the Detail Row template.

Handle the ASPxGridBase.BeforePerformDataSelect event to specify session values.

When finished, select the End Template Editing task and enable the master grid's ASPxGridViewDetailSettings.ShowDetailRow option.

The image below illustrates the result.

Is this topic helpful?​​​​​​​