[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Collapse]ASP.NET Bootstrap Controls
  ASP.NET Bootstrap Controls - Overview
 [Expand]Getting Started
 [Expand]Project Configuration
 [Collapse]Grid View
  [Expand]Binding to Data
  [Expand]Data Representation Basics
  [Expand]Data Summaries
   Cell Merging
  [Expand]Focus and Navigation
  [Expand]Data Editing
  [Collapse]Master-Detail Relationship
    Master-Detail: Implementation
    Expanding and Collapsing Detail Rows
   Export Overview
   Data-Toggle Attribute
 [Expand]Card View
 [Expand]Data Editors
 [Expand]Site Navigation
 [Expand]Site Layout
 [Expand]Redistribution and Deployment
 [Expand]API Reference
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Master-Detail: Implementation

In this document, you will learn how to use the Bootstrap Grid View to display master-detail data. Data is obtained from the Categories and Products tables in the NWind database. The Categories table is the master, while Products is a detail table. A master-detail relationship is established through the CategoryID field.

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

Expanded 1. Retrieve Data From the Database

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

  • Master: Categories

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

Expanded 2. Create Master and Detail ASPxGridView

Create two BootstrapGridView 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 BootstrapGridView'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?​​​​​​​