aspnet-114507-components-card-view-examples-how-to-show-detail-information-in-a-separate-aspxcardview.md
The example below uses two ASPxCardView controls to display master-detail data.
<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>
<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>
<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>
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