How to: Show Detail Information in a Separate ASPxGridView

  • 3 min to read

This example demonstrates how to use two ASPxGridView instances to show the master-detail data. Detail data is displayed in an external ASPxGridView when a master ASPxGridView's focused row index is modified.

MVC Version:

E3891: How to export multiple GridViews into a single print document

See Also:

E2529: How to show the ASPxGridView's detail information in the ASPxDataView

E1285: How to display master-detail tables in two grids on separate tabs of a PageControl

E2193: How to display detail data within a popup window

The animation below shows the result.

MasterDetailTwoGrids

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Master_Detail_Two_Grids" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to show detail information in a separate ASPxGridView</title>
    <script type="text/javascript">
        function UpdateDetailGrid(s, e) {
            detailGridView.PerformCallback();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxGridView ID="gvMaster" runat="server" ClientInstanceName="masterGridView"
            DataSourceID="adsCategories" AutoGenerateColumns="False" KeyFieldName="CategoryID">

            <SettingsBehavior AllowFocusedRow="True" AllowClientEventsOnLoad="False" />
            <ClientSideEvents FocusedRowChanged="UpdateDetailGrid" />

            <Columns>
                <dx:GridViewCommandColumn VisibleIndex="0">
                </dx:GridViewCommandColumn>
                <dx:GridViewDataTextColumn ReadOnly="True" VisibleIndex="1" FieldName="CategoryID" Caption="CategoryID">
                    <EditFormSettings Visible="False" />
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn VisibleIndex="2" FieldName="CategoryName" Caption="CategoryName">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn VisibleIndex="3" FieldName="Description" Caption="Description">
                </dx:GridViewDataTextColumn>
            </Columns>
        </dx:ASPxGridView>

        <dx:ASPxGridView ID="gvDetail" runat="server" ClientInstanceName="detailGridView" 
            DataSourceID="adsProducts" AutoGenerateColumns="False" KeyFieldName="ProductID" OnCustomCallback="gvDetail_CustomCallback">

            <Columns>
                <dx:GridViewCommandColumn VisibleIndex="0">
                </dx:GridViewCommandColumn>
                <dx:GridViewDataTextColumn FieldName="ProductID" ReadOnly="True" Caption="ProductID" VisibleIndex="1">
                    <EditFormSettings Visible="False" />
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="ProductName" Caption="ProductName" VisibleIndex="2">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="CategoryID" Caption="CategoryID" VisibleIndex="3">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="SupplierID" Caption="SupplierID" VisibleIndex="4">
                </dx:GridViewDataTextColumn>
            </Columns>
        </dx:ASPxGridView>

        <asp:AccessDataSource ID="adsCategories" runat="server" DataFile="~/App_Data/nwind.mdb"
            SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
        </asp:AccessDataSource>

        <asp:AccessDataSource ID="adsProducts" runat="server" DataFile="~/App_Data/nwind.mdb"
            SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [SupplierID] FROM [Products] WHERE CategoryID = ?">
            <SelectParameters>
                <asp:Parameter Name="CategoryID" Type="Int32" />
            </SelectParameters>
        </asp:AccessDataSource>
    </div>
    </form>
</body>
</html>