How to: Add a New Card when the Edit Form is Always Visible

Aug 01, 2019
7 minutes to read

The following example shows how to make the form used for the card editing always visible. To implement this, add the lines of code given below onto the form page.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/aspxcardview-how-to-add-a-new-card-when-the-edit-form-is-always-visible-t280421

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

<%@ Register Assembly="DevExpress.Xpo.v15.1, Version=15.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Xpo" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASPxCardView - How to add a new card when the edit form is always visible</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="False" OnBeforeGetCallbackResult="ASPxCardView1_BeforeGetCallbackResult" DataSourceID="XpoDataSource1" KeyFieldName="Oid" OnCardInserted="ASPxCardView1_CardInserted">
            <SettingsPager>
                <SettingsTableLayout ColumnCount="2" RowsPerPage="2" />
            </SettingsPager>
            <SettingsBehavior AllowFocusedCard="True" />
            <Columns>
                <dx:CardViewTextColumn FieldName="Oid" ReadOnly="True" SortIndex="0" SortOrder="Ascending" Visible="False" VisibleIndex="0">
                </dx:CardViewTextColumn>
                <dx:CardViewTextColumn FieldName="CompanyName" VisibleIndex="2">
                </dx:CardViewTextColumn>
                <dx:CardViewTextColumn FieldName="ContactName" VisibleIndex="3">
                </dx:CardViewTextColumn>
                <dx:CardViewTextColumn FieldName="Country" VisibleIndex="5">
                </dx:CardViewTextColumn>
            </Columns>
            <CardLayoutProperties>
                <Items>
                    <dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowEditButton="True" ShowNewButton="True">
                    </dx:CardViewCommandLayoutItem>
                    <dx:CardViewColumnLayoutItem ColumnName="Oid">
                    </dx:CardViewColumnLayoutItem>
                    <dx:CardViewColumnLayoutItem ColumnName="Company Name">
                    </dx:CardViewColumnLayoutItem>
                    <dx:CardViewColumnLayoutItem ColumnName="Contact Name">
                    </dx:CardViewColumnLayoutItem>
                    <dx:CardViewColumnLayoutItem ColumnName="Country">
                    </dx:CardViewColumnLayoutItem>
                    <dx:EditModeCommandLayoutItem HorizontalAlign="Right">
                    </dx:EditModeCommandLayoutItem>
                </Items>
            </CardLayoutProperties>
        </dx:ASPxCardView>
        <dx:XpoDataSource ID="XpoDataSource1" runat="server" TypeName="Customer"></dx:XpoDataSource>
    </div>
    </form>
</body>
</html>

using System;
using DevExpress.Xpo;

public class Customer : XPObject {
    public Customer (Session session)
        : base(session) { }

    public override void AfterConstruction () {
        base.AfterConstruction();
    }

    string _CompanyName;
    public string CompanyName {
        get { return _CompanyName; }
        set { SetPropertyValue("CompanyName", ref _CompanyName, value); }
    }

    string _ContactName;
    public string ContactName {
        get { return _ContactName; }
        set { SetPropertyValue("ContactName", ref _ContactName, value); }
    }

    string _Country;
    public string Country {
        get { return _Country; }
        set { SetPropertyValue("Country", ref _Country, value); }
    }
}

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using DevExpress.Xpo;
using DevExpress.Xpo.DB;
using DevExpress.Xpo.Metadata;

/// <summary>
/// Summary description for XpoHelper
/// </summary>
public static class XpoHelper {
    static XpoHelper () {
        CreateDefaultObjects();
    }

    public static Session GetNewSession () {
        return new Session(DataLayer);
    }

    public static UnitOfWork GetNewUnitOfWork () {
        return new UnitOfWork(DataLayer);
    }

    private readonly static object lockObject = new object();

    static IDataLayer fDataLayer;
    static IDataLayer DataLayer {
        get {
            if (fDataLayer == null) {
                lock (lockObject) {
                    fDataLayer = GetDataLayer();
                }
            }
            return fDataLayer;
        }
    }

    private static IDataLayer GetDataLayer () {
        XpoDefault.Session = null;

        InMemoryDataStore ds = new InMemoryDataStore();
        XPDictionary dict = new ReflectionDictionary();
        dict.GetDataStoreSchema(typeof(Customer).Assembly);

        return new ThreadSafeDataLayer(dict, ds);
    }

    static void CreateDefaultObjects () {
        using (UnitOfWork uow = GetNewUnitOfWork()) {
            Customer cust = new Customer(uow);
            cust.CompanyName = "Alfreds Futterkiste";
            cust.ContactName = "Maria Anders";
            cust.Country = "Germany";

            cust = new Customer(uow);
            cust.CompanyName = "Ana Trujillo Emparedados y helados";
            cust.ContactName = "Ana Trujillo";
            cust.Country = "Mexico";

            cust = new Customer(uow);
            cust.CompanyName = "Antonio Moreno Taquería";
            cust.ContactName = "Antonio Moreno";
            cust.Country = "Mexico";

            cust = new Customer(uow);
            cust.CompanyName = "Blondel père et fils";
            cust.ContactName = "Frédérique Citeaux";
            cust.Country = "France";

            cust = new Customer(uow);
            cust.CompanyName = "Berglunds snabbköp";
            cust.ContactName = "Christina Berglund";
            cust.Country = "Sweden";

            cust = new Customer(uow);
            cust.CompanyName = "Bottom-Dollar Markets";
            cust.ContactName = "Elizabeth Lincoln";
            cust.Country = "Canada";

            uow.CommitChanges();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Xpo;
using System.Collections;

public partial class _Default : System.Web.UI.Page
{
    UnitOfWork uof = XpoHelper.GetNewUnitOfWork();
    protected void Page_Init(object sender, EventArgs e)
    {
        XpoDataSource1.Session = uof;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            ASPxCardView1.AddNewCard();
        }
    }
    protected void ASPxCardView1_CardInserted(object sender, DevExpress.Web.Data.ASPxDataInsertedEventArgs e)
    {
        object newKey = null;
        if (e.AffectedRecords == 1)
        {
            ICollection objects = uof.GetObjectsToSave();
            if (objects != null && objects.Count == 1)
            {
                IEnumerator enumeration = objects.GetEnumerator();
                enumeration.MoveNext();
                Customer obj = (Customer)enumeration.Current;
                uof.CommitChanges();
                newKey = obj.Oid;
            }
        }
        ASPxCardView1.FocusedCardIndex = ASPxCardView1.FindVisibleIndexByKeyValue(newKey);
    }
    protected void ASPxCardView1_BeforeGetCallbackResult(object sender, EventArgs e)
    {
        if (!ASPxCardView1.IsEditing && !ASPxCardView1.IsNewCardEditing)
        {
            ASPxCardView1.AddNewCard();
        }
    }
}

Imports System
Imports DevExpress.Xpo

Public Class Customer
    Inherits XPObject

    Public Sub New(ByVal session As Session)
        MyBase.New(session)
    End Sub

    Public Overrides Sub AfterConstruction()
        MyBase.AfterConstruction()
    End Sub

    Private _CompanyName As String
    Public Property CompanyName() As String
        Get
            Return _CompanyName
        End Get
        Set(ByVal value As String)
            SetPropertyValue("CompanyName", _CompanyName, value)
        End Set
    End Property

    Private _ContactName As String
    Public Property ContactName() As String
        Get
            Return _ContactName
        End Get
        Set(ByVal value As String)
            SetPropertyValue("ContactName", _ContactName, value)
        End Set
    End Property

    Private _Country As String
    Public Property Country() As String
        Get
            Return _Country
        End Get
        Set(ByVal value As String)
            SetPropertyValue("Country", _Country, value)
        End Set
    End Property
End Class

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports DevExpress.Xpo
Imports DevExpress.Xpo.DB
Imports DevExpress.Xpo.Metadata

''' <summary>
''' Summary description for XpoHelper
''' </summary>
Public NotInheritable Class XpoHelper

    Private Sub New()
    End Sub

    Shared Sub New()
        CreateDefaultObjects()
    End Sub

    Public Shared Function GetNewSession() As Session
        Return New Session(DataLayer)
    End Function

    Public Shared Function GetNewUnitOfWork() As UnitOfWork
        Return New UnitOfWork(DataLayer)
    End Function

    Private ReadOnly Shared lockObject As New Object()

    Private Shared fDataLayer As IDataLayer
    Private Shared ReadOnly Property DataLayer() As IDataLayer
        Get
            If fDataLayer Is Nothing Then
                SyncLock lockObject
                    fDataLayer = GetDataLayer()
                End SyncLock
            End If
            Return fDataLayer
        End Get
    End Property

    Private Shared Function GetDataLayer() As IDataLayer
        XpoDefault.Session = Nothing

        Dim ds As New InMemoryDataStore()
        Dim dict As XPDictionary = New ReflectionDictionary()
        dict.GetDataStoreSchema(GetType(Customer).Assembly)

        Return New ThreadSafeDataLayer(dict, ds)
    End Function

    Private Shared Sub CreateDefaultObjects()
        Using uow As UnitOfWork = GetNewUnitOfWork()
            Dim cust As New Customer(uow)
            cust.CompanyName = "Alfreds Futterkiste"
            cust.ContactName = "Maria Anders"
            cust.Country = "Germany"

            cust = New Customer(uow)
            cust.CompanyName = "Ana Trujillo Emparedados y helados"
            cust.ContactName = "Ana Trujillo"
            cust.Country = "Mexico"

            cust = New Customer(uow)
            cust.CompanyName = "Antonio Moreno Taquería"
            cust.ContactName = "Antonio Moreno"
            cust.Country = "Mexico"

            cust = New Customer(uow)
            cust.CompanyName = "Blondel père et fils"
            cust.ContactName = "Frédérique Citeaux"
            cust.Country = "France"

            cust = New Customer(uow)
            cust.CompanyName = "Berglunds snabbköp"
            cust.ContactName = "Christina Berglund"
            cust.Country = "Sweden"

            cust = New Customer(uow)
            cust.CompanyName = "Bottom-Dollar Markets"
            cust.ContactName = "Elizabeth Lincoln"
            cust.Country = "Canada"

            uow.CommitChanges()
        End Using
    End Sub
End Class

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports DevExpress.Xpo
Imports System.Collections

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Private uof As UnitOfWork = XpoHelper.GetNewUnitOfWork()
    Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
        XpoDataSource1.Session = uof
    End Sub
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not IsPostBack Then
            ASPxCardView1.AddNewCard()
        End If
    End Sub
    Protected Sub ASPxCardView1_CardInserted(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataInsertedEventArgs)
        Dim newKey As Object = Nothing
        If e.AffectedRecords = 1 Then
            Dim objects As ICollection = uof.GetObjectsToSave()
            If objects IsNot Nothing AndAlso objects.Count = 1 Then
                Dim enumeration As IEnumerator = objects.GetEnumerator()
                enumeration.MoveNext()
                Dim obj As Customer = DirectCast(enumeration.Current, Customer)
                uof.CommitChanges()
                newKey = obj.Oid
            End If
        End If
        ASPxCardView1.FocusedCardIndex = ASPxCardView1.FindVisibleIndexByKeyValue(newKey)
    End Sub
    Protected Sub ASPxCardView1_BeforeGetCallbackResult(ByVal sender As Object, ByVal e As EventArgs)
        If (Not ASPxCardView1.IsEditing) AndAlso (Not ASPxCardView1.IsNewCardEditing) Then
            ASPxCardView1.AddNewCard()
        End If
    End Sub
End Class

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

<%@ Register Assembly="DevExpress.Xpo.v15.1, Version=15.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Xpo" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASPxCardView - How to add a new card when the edit form is always visible</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="False" OnBeforeGetCallbackResult="ASPxCardView1_BeforeGetCallbackResult" DataSourceID="XpoDataSource1" KeyFieldName="Oid" OnCardInserted="ASPxCardView1_CardInserted">
            <SettingsPager>
                <SettingsTableLayout ColumnCount="2" RowsPerPage="2" />
            </SettingsPager>
            <SettingsBehavior AllowFocusedCard="True" />
            <Columns>
                <dx:CardViewTextColumn FieldName="Oid" ReadOnly="True" SortIndex="0" SortOrder="Ascending" Visible="False" VisibleIndex="0">
                </dx:CardViewTextColumn>
                <dx:CardViewTextColumn FieldName="CompanyName" VisibleIndex="2">
                </dx:CardViewTextColumn>
                <dx:CardViewTextColumn FieldName="ContactName" VisibleIndex="3">
                </dx:CardViewTextColumn>
                <dx:CardViewTextColumn FieldName="Country" VisibleIndex="5">
                </dx:CardViewTextColumn>
            </Columns>
            <CardLayoutProperties>
                <Items>
                    <dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowEditButton="True" ShowNewButton="True">
                    </dx:CardViewCommandLayoutItem>
                    <dx:CardViewColumnLayoutItem ColumnName="Oid">
                    </dx:CardViewColumnLayoutItem>
                    <dx:CardViewColumnLayoutItem ColumnName="Company Name">
                    </dx:CardViewColumnLayoutItem>
                    <dx:CardViewColumnLayoutItem ColumnName="Contact Name">
                    </dx:CardViewColumnLayoutItem>
                    <dx:CardViewColumnLayoutItem ColumnName="Country">
                    </dx:CardViewColumnLayoutItem>
                    <dx:EditModeCommandLayoutItem HorizontalAlign="Right">
                    </dx:EditModeCommandLayoutItem>
                </Items>
            </CardLayoutProperties>
        </dx:ASPxCardView>
        <dx:XpoDataSource ID="XpoDataSource1" runat="server" TypeName="Customer"></dx:XpoDataSource>
    </div>
    </form>
</body>
</html>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode