Master-Detail View

The Grid View control allows you to build master-detail layouts of any complexity and nesting depth by providing a detail row template, which defines the way detail data is presented.

This demo demonstrates how you can use nested grid controls to visualize a simple master-detail relationship between two data tables. To achieve this goal, use the following steps.

  1. Create two Grid View controls.
  2. Bind the first grid (the master grid) to a master data source and enable its SettingsDetail.ShowDetailRow option.
  3. Bind the second grid (the detail grid) to a detail data source that uses a SessionParameter as a filtering criterion.
  4. Create a DetailRow template for the master grid and place the detail grid onto it.
  5. Finally, handle the detail grid's BeforePerformDataSelect event and specify the session value used as a filtering criterion.
Contact Name Company Name City Country
Maria AndersAlfreds FutterkisteBerlinGermany
 
Order ID Order Date Ship Name Unit Price Quantity Total
110114/9/2016Alfred's Futterkiste$13.0040$520.00
110114/9/2016Alfred's Futterkiste$22.0020$440.00
1069210/3/2015Alfred's Futterkiste$44.0020$880.00
1070210/13/2015Alfred's Futterkiste$10.006$60.00
1070210/13/2015Alfred's Futterkiste$18.0015$270.00
Ana TrujilloAna Trujillo Emparedados y heladosMéxico D.F.Mexico
Antonio MorenoAntonio Moreno TaqueríaMéxico D.F.Mexico
Thomas HardyAround the HornLondonUK
Christina BerglundBerglunds snabbköpLuleåSweden
Hanna MoosBlauer See DelikatessenMannheimGermany
Frédérique CiteauxBlondesddsl père et filsStrasbourgFrance
Martín SommerBólido Comidas preparadasMadridSpain
Laurence LebihanBon app'MarseilleFrance
Elizabeth LincolnBottom-Dollar MarketsTsawassenCanada
<dx:BootstrapGridView runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID">
    <SettingsDetail ShowDetailRow="true" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" />
    </Columns>
    <Templates>
        <DetailRow>
            <dx:BootstrapGridView runat="server" DataSourceID="InvoicesDataSource" KeyFieldName="OrderID;ProductID"
                OnBeforePerformDataSelect="detailGrid_DataSelect" OnCustomUnboundColumnData="detailGrid_CustomUnboundColumnData">
                <Columns>
                    <dx:BootstrapGridViewDataColumn FieldName="OrderID" Caption="Order ID" />
                    <dx:BootstrapGridViewDataColumn FieldName="OrderDate" />
                    <dx:BootstrapGridViewDataColumn FieldName="ShipName" />
                    <dx:BootstrapGridViewTextColumn FieldName="UnitPrice">
                        <PropertiesTextEdit DisplayFormatString="c" />
                    </dx:BootstrapGridViewTextColumn>
                    <dx:BootstrapGridViewDataColumn FieldName="Quantity" Name="Quantity" />
                    <dx:BootstrapGridViewTextColumn FieldName="Total" UnboundType="Decimal">
                        <PropertiesTextEdit DisplayFormatString="c" />
                    </dx:BootstrapGridViewTextColumn>
                </Columns>
                <SettingsPager PageSize="5"></SettingsPager>
            </dx:BootstrapGridView>
        </DetailRow>
    </Templates>
</dx:BootstrapGridView>
<ef:EntityDataSource runat="server" ID="CustomersDataSource" ContextTypeName="DevExpress.Web.Demos.NorthwindContextSL" EntitySetName="Customers" />
<ef:EntityDataSource runat="server" ID="InvoicesDataSource" ContextTypeName="DevExpress.Web.Demos.NorthwindContextSL" EntitySetName="Invoices" Where="it.CustomerID = @CustomerID">
    <WhereParameters>
        <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="String" />
    </WhereParameters>
</ef:EntityDataSource>
protected void detailGrid_DataSelect(object sender, EventArgs e) {
    Session["CustomerID"] = (sender as BootstrapGridView).GetMasterRowKeyValue();
}
protected void detailGrid_CustomUnboundColumnData(object sender, ASPxGridViewColumnDataEventArgs e) {
    if(e.Column.FieldName == "Total") {
        decimal price = (decimal)e.GetListSourceFieldValue("UnitPrice");
        int quantity = Convert.ToInt32(e.GetListSourceFieldValue("Quantity"));
        e.Value = price * quantity;
    }
}
Screen Size
Color Themes
Demo QR Code