How to: Show Detail Information in a Separate ASPxCardView

• Dec 17, 2020
• 2 minutes to read

The example below uses two ASPxCardView controls to display master-detail data.

Default.aspx

<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>

Default.aspx.cs

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();

    }
}

Default.aspx.vb

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