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.
-
Create two Grid View controls.
-
Bind the first grid (the master grid) to a master data source and enable its SettingsDetail.ShowDetailRow option.
-
Bind the second grid (the detail grid) to a detail data source that uses a SessionParameter as a filtering criterion.
-
Create a DetailRow template for the master grid and place the detail grid onto it.
-
Finally, handle the detail grid's BeforePerformDataSelect event and specify the session value used as a filtering criterion.
| Maria Anders | Alfreds Futterkiste | Berlin | Germany |
|
11011 | 4/9/2016 | Alfred's Futterkiste | $13.00 | 40 | $520.00 |
11011 | 4/9/2016 | Alfred's Futterkiste | $22.00 | 20 | $440.00 |
10692 | 10/3/2015 | Alfred's Futterkiste | $44.00 | 20 | $880.00 |
10702 | 10/13/2015 | Alfred's Futterkiste | $10.00 | 6 | $60.00 |
10702 | 10/13/2015 | Alfred's Futterkiste | $18.00 | 15 | $270.00 |
|
| Ana Trujillo | Ana Trujillo Emparedados y helados | México D.F. | Mexico |
| Antonio Moreno | Antonio Moreno Taquería | México D.F. | Mexico |
| Thomas Hardy | Around the Horn | London | UK |
| Christina Berglund | Berglunds snabbköp | Luleå | Sweden |
| Hanna Moos | Blauer See Delikatessen | Mannheim | Germany |
| Frédérique Citeaux | Blondesddsl père et fils | Strasbourg | France |
| Martín Sommer | Bólido Comidas preparadas | Madrid | Spain |
| Laurence Lebihan | Bon app' | Marseille | France |
| Elizabeth Lincoln | Bottom-Dollar Markets | Tsawassen | Canada |
<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