This example demonstrates how to use two ASPxCardView controls to display master-detail data.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.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>How to display master-detail data using two ASPxCardView controls.</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="False" DataSourceID="dsCategories" KeyFieldName="CategoryID">
<ClientSideEvents FocusedCardChanged="function(s, e) {
cardView2.PerformCallback(s.GetFocusedCardIndex());
}" />
<Settings ShowTitlePanel="True" />
<SettingsBehavior AllowFocusedCard="True" />
<SettingsText Title="Categories" />
<SettingsPager>
<SettingsTableLayout RowsPerPage="2" />
</SettingsPager>
<Columns>
<dx:CardViewTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="0" Visible="false">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="CategoryName" VisibleIndex="1">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="Description" VisibleIndex="2">
</dx:CardViewTextColumn>
</Columns>
</dx:ASPxCardView>
<br />
<dx:ASPxCardView ID="ASPxCardView2" KeyFieldName="ProductID" OnCustomCallback="ASPxCardView2_CustomCallback" ClientInstanceName="cardView2" runat="server" AutoGenerateColumns="False">
<SettingsText Title="Products" />
<SettingsPager>
<SettingsTableLayout RowsPerPage="2" />
</SettingsPager>
<Settings ShowTitlePanel="True" />
<Columns>
<dx:CardViewTextColumn FieldName="ProductID" ReadOnly="True" Visible="False" VisibleIndex="0">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="ProductName" VisibleIndex="1">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="UnitPrice" VisibleIndex="2">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="UnitsInStock" VisibleIndex="3">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="QuantityPerUnit" VisibleIndex="4">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="CategoryID" Visible="False" VisibleIndex="5">
</dx:CardViewTextColumn>
</Columns>
</dx:ASPxCardView>
<br />
<asp:AccessDataSource ID="dsCategories" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
</asp:AccessDataSource>
<asp:AccessDataSource ID="dsProducts" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice], [UnitsInStock],
[QuantityPerUnit] FROM [Products] WHERE ([CategoryID] = ?)">
<SelectParameters>
<asp:SessionParameter Name="CategoryID" SessionField="CategoryID" Type="Int32" />
</SelectParameters>
</asp:AccessDataSource>
</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;
using DevExpress.Web;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["CategoryID"] != null)
{
ASPxCardView2.DataSource = dsProducts;
ASPxCardView2.DataBind();
}
}
protected void ASPxCardView2_CustomCallback(object sender, DevExpress.Web.ASPxCardViewCustomCallbackEventArgs e)
{
object masterKeyValue = ASPxCardView1.GetCardValues(Convert.ToInt32(e.Parameters), "CategoryID");
Session["CategoryID"] = masterKeyValue;
ASPxCardView2.DataSource = dsProducts;
ASPxCardView2.PageIndex = 0;
ASPxCardView2.DataBind();
}
}
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports DevExpress.Web
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If Session("CategoryID") IsNot Nothing Then
ASPxCardView2.DataSource = dsProducts
ASPxCardView2.DataBind()
End If
End Sub
Protected Sub ASPxCardView2_CustomCallback(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxCardViewCustomCallbackEventArgs)
Dim masterKeyValue As Object = ASPxCardView1.GetCardValues(Convert.ToInt32(e.Parameters), "CategoryID")
Session("CategoryID") = masterKeyValue
ASPxCardView2.DataSource = dsProducts
ASPxCardView2.PageIndex = 0
ASPxCardView2.DataBind()
End Sub
End Class
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.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>How to display master-detail data using two ASPxCardView controls.</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="False" DataSourceID="dsCategories" KeyFieldName="CategoryID">
<ClientSideEvents FocusedCardChanged="function(s, e) {
cardView2.PerformCallback(s.GetFocusedCardIndex());
}" />
<Settings ShowTitlePanel="True" />
<SettingsBehavior AllowFocusedCard="True" />
<SettingsText Title="Categories" />
<SettingsPager>
<SettingsTableLayout RowsPerPage="2" />
</SettingsPager>
<Columns>
<dx:CardViewTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="0" Visible="false">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="CategoryName" VisibleIndex="1">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="Description" VisibleIndex="2">
</dx:CardViewTextColumn>
</Columns>
</dx:ASPxCardView>
<br />
<dx:ASPxCardView ID="ASPxCardView2" KeyFieldName="ProductID" OnCustomCallback="ASPxCardView2_CustomCallback" ClientInstanceName="cardView2" runat="server" AutoGenerateColumns="False">
<SettingsText Title="Products" />
<SettingsPager>
<SettingsTableLayout RowsPerPage="2" />
</SettingsPager>
<Settings ShowTitlePanel="True" />
<Columns>
<dx:CardViewTextColumn FieldName="ProductID" ReadOnly="True" Visible="False" VisibleIndex="0">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="ProductName" VisibleIndex="1">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="UnitPrice" VisibleIndex="2">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="UnitsInStock" VisibleIndex="3">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="QuantityPerUnit" VisibleIndex="4">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="CategoryID" Visible="False" VisibleIndex="5">
</dx:CardViewTextColumn>
</Columns>
</dx:ASPxCardView>
<br />
<asp:AccessDataSource ID="dsCategories" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
</asp:AccessDataSource>
<asp:AccessDataSource ID="dsProducts" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice], [UnitsInStock],
[QuantityPerUnit] FROM [Products] WHERE ([CategoryID] = ?)">
<SelectParameters>
<asp:SessionParameter Name="CategoryID" SessionField="CategoryID" Type="Int32" />
</SelectParameters>
</asp:AccessDataSource>
</div>
</form>
</body>
</html>