aspnet-115492-components-card-view-examples-how-to-display-master-detail-tables-in-two-grids-on-separate-tabs-of-a-pagecontrol.md
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 detail data within a popup window
<%@ 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>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) {
}
protected void ASPxButton1_Click(object sender, EventArgs e) {
ASPxPageControl1.ActiveTabIndex = 1;
}
protected void ASPxCardView1_FocusedCardChanged(object sender, EventArgs e) {
int card = ASPxCardView1.FocusedCardIndex;
object key = ASPxCardView1.GetCardValues(card, ASPxCardView1.KeyFieldName);
Session["CategoryID"] = key;
}
}
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" 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>
</div>
</form>
</body>
</html>
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub ASPxButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
ASPxPageControl1.ActiveTabIndex = 1
End Sub
Protected Sub ASPxCardView1_FocusedCardChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim card As Integer = ASPxCardView1.FocusedCardIndex
Dim key As Object = ASPxCardView1.GetCardValues(card, ASPxCardView1.KeyFieldName)
Session("CategoryID") = key
End Sub
End Class