How to: Show Detail Information in a Separate ASPxGridView

Jan 27, 2022

This example demonstrates how to use two ASPxGridView instances to show the master-detail data.

The master grid calls the PerformCallback(args) method to send a callback to the server when a user changes a focused row. On callback, the detail grid gets data from a data source according to the selected product category in the master grid.

View Example: How to show detail information in a separate ASPxGridView

ASPX
JS
C#

aspx

<dx:ASPxGridView ID="gvMaster" runat="server" ClientInstanceName="masterGridView" ... >
    <ClientSideEvents FocusedRowChanged="UpdateDetailGrid" />
    ...
</dx:ASPxGridView>

<dx:ASPxGridView ID="gvDetail" runat="server" ClientInstanceName="detailGridView" OnCustomCallback="gvDetail_CustomCallback" ...>
    ...
</dx:ASPxGridView>

function UpdateDetailGrid(s, e) {
    detailGridView.PerformCallback();
}

csharp

protected void gvDetail_CustomCallback(object sender, DevExpress.Web.ASPxGridViewCustomCallbackEventArgs e) {
    string categoryId = gvMaster.GetRowValues(gvMaster.FocusedRowIndex, "CategoryID").ToString();
    adsProducts.SelectParameters["CategoryID"].DefaultValue = categoryId;
    gvDetail.DataBind();
}

The animation below shows the result.