Master-Detail: Implementation

Jul 11, 2023
2 minutes to read

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

Retrieve Data From a Database
Create Master and Detail ASPxGridViews
Set up Master-Detail Relationship

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).

2. Create Master and Detail ASPxGridView

Create two ASPxGridView controls. Bind the first grid (master) to dsCategories. Bind the second grid (detail) to dsProducts. To specify data source key fields for both grids, use their corresponding ASPxGridBase.KeyFieldName properties.

3. Set up a Master-Detail Relationship

Click the smart tag’s Edit Templates task to invoke ASPxGridView’s Template Designer (Template Editing Mode). Select the DetailRow template.

cdMasterDetail_DetailRowTem

Drag the detail grid onto the Detail Row template.

cdMasterDetail_IsDetailGrid

Handle the ASPxGridBase.BeforePerformDataSelect event to specify session values.

C#
VB.NET

using DevExpress.Web.ASPxGridView;

protected void detailGrid_BeforePerformDataSelect(object sender, EventArgs e) {
    Session["CategoryID"] = (sender as ASPxGridView).GetMasterRowKeyValue();
}

Protected Sub detailGrid_BeforePerformDataSelect_
(ByVal sender As Object, ByVal e As System.EventArgs)
    Session("CategoryID") = CType(sender, ASPxGridView).GetMasterRowKeyValue()
End Sub

When finished, select the End Template Editing task and set the master grid’s ASPxGridViewDetailSettings.ShowDetailRow property to true.

Alternatively, you can use the ASPxGridView Designer’s Feature Browser to display master-detail data.

ASPxGridView-MAster-Detail-Design