How to: Display Master-Detail Tables in Two Grids on Separate Tabs of a PageControl

  • 4 minutes to read

This example demonstrates how to use two grids to display related tables. Each grid is located on a separate tab. When an end user focuses a card in the first (master) grid, the card's detail data is displayed in the second grid. The template column in the first grid contains a button. When clicked, the button activates the second tab page that contains the detail grid. For more information on master-detail data, see the following DevExpress Support Center examples:

ASPxCardView - How to display master-detail data using two ASPxCardView controls

ASPxCardView - How to display detail data within a popup window

View Example

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



<%@ Register assembly="DevExpress.Web.v15.2, Version=15.2.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>



<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxPageControl ID="ASPxPageControl1" runat="server" AutoPostBack="True" Width="600px" ActiveTabIndex="0">
            <TabPages>
                <dx:TabPage Text="Categories">
                    <ContentCollection>
                        <dx:ContentControl runat="server">
                            <dx:ASPxCardView ID="ASPxCardView1" runat="server" OnFocusedCardChanged="ASPxCardView1_FocusedCardChanged" AutoGenerateColumns="False" 
                                DataSourceID="SqlDataSource1" KeyFieldName="CategoryID" >
                                <SettingsBehavior AllowFocusedCard="True" ProcessFocusedCardChangedOnServer="True" />
                                <Columns>
                                    <dx:CardViewTextColumn ShowInCustomizationForm="True" FieldName="CategoryID" ReadOnly="True" Visible="False">
                                    </dx:CardViewTextColumn>
                                    <dx:CardViewTextColumn FieldName="CategoryName" ShowInCustomizationForm="True" VisibleIndex="0">
                                    </dx:CardViewTextColumn>
                                    <dx:CardViewTextColumn ShowInCustomizationForm="True" Name="colShowProducts" VisibleIndex="1" Width="130px">
                                        <DataItemTemplate>
                                            <dx:ASPxButton ID="ASPxButton1" runat="server" OnClick="ASPxButton1_Click" Text="Show products...">
                                            </dx:ASPxButton>
                                        </DataItemTemplate>
                                    </dx:CardViewTextColumn>
                                </Columns>
                                <CardLayoutProperties>
                                    <Items>
                                        <dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowEditButton="True">
                                        </dx:CardViewCommandLayoutItem>
                                        <dx:CardViewColumnLayoutItem ColumnName="CategoryName">
                                        </dx:CardViewColumnLayoutItem>
                                        <dx:CardViewColumnLayoutItem ColumnName="colShowProducts"></dx:CardViewColumnLayoutItem>
                                        <dx:EditModeCommandLayoutItem HorizontalAlign="Right">
                                        </dx:EditModeCommandLayoutItem>
                                    </Items>
                                </CardLayoutProperties>
                            </dx:ASPxCardView>
                            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\nwind.mdb;Persist Security Info=True" 
                                ProviderName="System.Data.OleDb" SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
                        </dx:ContentControl>
                    </ContentCollection>
                </dx:TabPage>
                <dx:TabPage Text="Products">
                    <ContentCollection>
                        <dx:ContentControl runat="server">
                        <dx:ASPxCardView ID="ASPxCardView3" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource2" KeyFieldName="ProductID">
                            <Columns>
                                <dx:CardViewTextColumn FieldName="ProductID" ReadOnly="True" Visible="False">
                                </dx:CardViewTextColumn>
                                <dx:CardViewTextColumn FieldName="ProductName" VisibleIndex="0">
                                </dx:CardViewTextColumn>
                                <dx:CardViewTextColumn FieldName="CategoryID" VisibleIndex="1">
                                </dx:CardViewTextColumn>
                                <dx:CardViewTextColumn FieldName="UnitPrice" VisibleIndex="2">
                                </dx:CardViewTextColumn>
                            </Columns>
                        </dx:ASPxCardView>
                        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\nwind.mdb;Persist Security Info=True" 
                            ProviderName="System.Data.OleDb" SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
                            <SelectParameters>
                                <asp:SessionParameter DefaultValue="1" Name="CategoryID" SessionField="CategoryID" Type="Int32" />
                            </SelectParameters>
                        </asp:SqlDataSource>                     
                        </dx:ContentControl>
                    </ContentCollection>
                </dx:TabPage>

            </TabPages>
            </dx:ASPxPageControl>


        <br />

    </div>
    </form>
</body>
</html>