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 NameCompany NameCityCountry
Maria AndersAlfreds FutterkisteBerlinGermany
 
Order IDOrder DateShip NameUnit PriceQuantityTotal
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" />
        ...
    </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" />
                    ...
                </Columns>
            </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>
Screen Size
Color Themes
Demo QR Code