Creating and Initializing New Cards
End users can use the New command to create new cards.
To allow users to add new cards, set the ASPxGridDataSecuritySettings.AllowInsert and CardViewCommandLayoutItem.ShowNewButton properties to true.
To create cards in code, use the server ASPxCardView.AddNewCard or client ASPxClientCardView.AddNewCard method. These methods switch ASPxCardView to an edit mode and allow the values of the new card to be edited.
To initialize card values in code, handle the ASPxCardView.InitNewCard event.
Example:
In this example, the ASPxCardView.InitNewCard event is handled to initialize the new record’s field values with default values.
The image below shows the result:
protected void ASPxCardView1_InitNewCard(object sender, DevExpress.Web.Data.ASPxDataInitNewRowEventArgs e)
{
e.NewValues["CategoryName"] = "Seafood";
e.NewValues["Description"] = "Seafood and fish";
}
Adding Cards
To add a new record to the underlying data source, call the ASPxCardView.UpdateEdit (or ASPxClientCardView.UpdateEdit) method. End users can click the Update command to add a new record at runtime.
You can also implement card validation. See the following help topic for more information: Card Validation and Error Indication.
After a new card is added to ASPxCardView, the ASPxCardView.CardInserted event is raised. To cancel the insert operation, handle the ASPxCardView.CardInserting event.
Deleting Cards
End users can use the Delete command to delete cards at runtime. To delete cards in code, use the server-side ASPxCardView.DeleteCard method or the client-side ASPxClientCardView.DeleteCard method.
After a card is deleted, the ASPxCardView.CardDeleted event is raised. To cancel the delete operation, handle the ASPxCardView.CardDeleting event.
To allow an end user to cancel the delete operation, enable the ASPxGridBehaviorSettings.ConfirmDelete option. In this instance, when the user deletes a card, the Confirm Delete window is automatically displayed.
You can use the ASPxGridTextSettings.ConfirmDelete property to specify the Confirm Delete window’s display text.
Example:
The following example deletes selected cards in an ASPxCardView bound to an in-memory datasource.
View Example
using System;
using System.Collections.Generic;
using System.Linq;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web;
public partial class _Default : System.Web.UI.Page
{
DataTable table = null;
protected void Page_Init(object sender, EventArgs e) {
if (!IsPostBack && !IsCallback)
{
table = new DataTable();
table.Columns.Add("ID", typeof(int));
table.Columns.Add("Data", typeof(string));
table.PrimaryKey = new DataColumn[] { table.Columns["ID"] };
for (int i = 0; i < 10; i++)
{
table.Rows.Add(new object[] { i, "row " + i.ToString() });
}
Session["table"] = table;
}
else
table = (DataTable)Session["table"];
}
protected void Page_Load(object sender, EventArgs e) {
if (!IsCallback && !IsPostBack) ASPxCardView1.DataBind();
}
protected void ASPxCardView1_CellEditorInitialize(object sender, DevExpress.Web.ASPxCardViewEditorEventArgs e) {
ASPxCardView grid2 = (ASPxCardView)sender;
if (e.Column.FieldName == "ID")
{
ASPxTextBox textBox = (ASPxTextBox)e.Editor;
textBox.ClientEnabled = false;
if (grid2.IsNewCardEditing)
{
table = (DataTable)Session["table"];
textBox.Text = GetNewId().ToString();
}
}
}
protected void ASPxCardView1_CardInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e) {
table = (DataTable)Session["table"];
ASPxCardView cv = (ASPxCardView)sender;
DataRow row = table.NewRow();
row["ID"] = e.NewValues["ID"];
row["Data"] = e.NewValues["Data"];
cv.CancelEdit();
e.Cancel = true;
table.Rows.Add(row);
}
protected void ASPxCardView1_CardUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) {
table = (DataTable)Session["table"];
DataRow row = table.Rows.Find(e.Keys[0]);
row["Data"] = e.NewValues["Data"];
ASPxCardView1.CancelEdit();
e.Cancel = true;
}
protected void ASPxCardView1_DataBinding(object sender, EventArgs e) {
ASPxCardView1.DataSource = table;
}
#region #CustomCallbackMethod
protected void ASPxCardView1_CustomCallback(object sender, DevExpress.Web.ASPxCardViewCustomCallbackEventArgs e) {
if (e.Parameters == "Delete")
{
table = (DataTable)Session["table"];
List<Object> selectItems = ASPxCardView1.GetSelectedFieldValues("ID");
foreach (object selectItemId in selectItems)
{
table.Rows.Remove(table.Rows.Find(selectItemId));
}
ASPxCardView1.DataBind();
ASPxCardView1.Selection.UnselectAll();
}
}
#endregion #CustomCallbackMethod
private int GetNewId() {
table = (DataTable)Session["table"];
if (table.Rows.Count == 0) return 0;
int max = Convert.ToInt32(table.Rows[0]["ID"]);
for (int i = 1; i < table.Rows.Count; i++)
{
if (Convert.ToInt32(table.Rows[i]["ID"]) > max)
max = Convert.ToInt32(table.Rows[i]["ID"]);
}
return max + 1;
}
}
<%@ 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">
<script type="text/javascript">
function OnClickButtonDel(s, e) {
card.PerformCallback('Delete');
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxCardView ID="ASPxCardView1" KeyFieldName="ID" AutoGenerateColumns="False" runat="server" OnCellEditorInitialize="ASPxCardView1_CellEditorInitialize" OnCardInserting="ASPxCardView1_CardInserting" OnCardUpdating="ASPxCardView1_CardUpdating" ClientInstanceName="card" OnCustomCallback="ASPxCardView1_CustomCallback" OnDataBinding="ASPxCardView1_DataBinding">
<Columns>
<dx:CardViewTextColumn FieldName="ID" VisibleIndex="0">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="Data" VisibleIndex="1">
</dx:CardViewTextColumn>
</Columns>
<CardLayoutProperties>
<Items>
<dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowSelectCheckbox="True">
</dx:CardViewCommandLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName ="ID" >
</dx:CardViewColumnLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="Data" >
</dx:CardViewColumnLayoutItem>
<dx:EditModeCommandLayoutItem HorizontalAlign="Right">
</dx:EditModeCommandLayoutItem>
</Items>
</CardLayoutProperties>
</dx:ASPxCardView>
<dx:ASPxButton ID="ASPxButton1" runat="server" ClientInstanceName="btn1" AutoPostBack="false" Text="Delete">
<ClientSideEvents Click="OnClickButtonDel"/>
</dx:ASPxButton>
</div>
</form>
</body>
</html>
<%@ 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">
<script type="text/javascript">
function OnClickButtonDel(s, e) {
card.PerformCallback('Delete');
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxCardView ID="ASPxCardView1" KeyFieldName="ID" AutoGenerateColumns="False" runat="server" OnCellEditorInitialize="ASPxCardView1_CellEditorInitialize" OnCardInserting="ASPxCardView1_CardInserting" OnCardUpdating="ASPxCardView1_CardUpdating" ClientInstanceName="card" OnCustomCallback="ASPxCardView1_CustomCallback" OnDataBinding="ASPxCardView1_DataBinding">
<Columns>
<dx:CardViewTextColumn FieldName="ID" VisibleIndex="0">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="Data" VisibleIndex="1">
</dx:CardViewTextColumn>
</Columns>
<CardLayoutProperties>
<Items>
<dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowSelectCheckbox="True">
</dx:CardViewCommandLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName ="ID" >
</dx:CardViewColumnLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="Data" >
</dx:CardViewColumnLayoutItem>
<dx:EditModeCommandLayoutItem HorizontalAlign="Right">
</dx:EditModeCommandLayoutItem>
</Items>
</CardLayoutProperties>
</dx:ASPxCardView>
<dx:ASPxButton ID="ASPxButton1" runat="server" ClientInstanceName="btn1" AutoPostBack="false" Text="Delete">
<ClientSideEvents Click="OnClickButtonDel"/>
</dx:ASPxButton>
</div>
</form>
</body>
</html>
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Data
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports DevExpress.Web
Partial Public Class _Default
Inherits System.Web.UI.Page
Private table As DataTable = Nothing
Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
If (Not IsPostBack) AndAlso (Not IsCallback) Then
table = New DataTable()
table.Columns.Add("ID", GetType(Integer))
table.Columns.Add("Data", GetType(String))
table.PrimaryKey = New DataColumn() { table.Columns("ID") }
For i As Integer = 0 To 9
table.Rows.Add(New Object() { i, "row " & i.ToString() })
Next i
Session("table") = table
Else
table = DirectCast(Session("table"), DataTable)
End If
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If (Not IsCallback) AndAlso (Not IsPostBack) Then
ASPxCardView1.DataBind()
End If
End Sub
Protected Sub ASPxCardView1_CellEditorInitialize(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxCardViewEditorEventArgs)
Dim grid2 As ASPxCardView = DirectCast(sender, ASPxCardView)
If e.Column.FieldName = "ID" Then
Dim textBox As ASPxTextBox = CType(e.Editor, ASPxTextBox)
textBox.ClientEnabled = False
If grid2.IsNewCardEditing Then
table = DirectCast(Session("table"), DataTable)
textBox.Text = GetNewId().ToString()
End If
End If
End Sub
Protected Sub ASPxCardView1_CardInserting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataInsertingEventArgs)
table = DirectCast(Session("table"), DataTable)
Dim cv As ASPxCardView = DirectCast(sender, ASPxCardView)
Dim row As DataRow = table.NewRow()
row("ID") = e.NewValues("ID")
row("Data") = e.NewValues("Data")
cv.CancelEdit()
e.Cancel = True
table.Rows.Add(row)
End Sub
Protected Sub ASPxCardView1_CardUpdating(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataUpdatingEventArgs)
table = DirectCast(Session("table"), DataTable)
Dim row As DataRow = table.Rows.Find(e.Keys(0))
row("Data") = e.NewValues("Data")
ASPxCardView1.CancelEdit()
e.Cancel = True
End Sub
Protected Sub ASPxCardView1_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
ASPxCardView1.DataSource = table
End Sub
#Region "#CustomCallbackMethod"
Protected Sub ASPxCardView1_CustomCallback(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxCardViewCustomCallbackEventArgs)
If e.Parameters = "Delete" Then
table = DirectCast(Session("table"), DataTable)
Dim selectItems As List(Of Object) = ASPxCardView1.GetSelectedFieldValues("ID")
For Each selectItemId As Object In selectItems
table.Rows.Remove(table.Rows.Find(selectItemId))
Next selectItemId
ASPxCardView1.DataBind()
ASPxCardView1.Selection.UnselectAll()
End If
End Sub
#End Region ' #CustomCallbackMethod
Private Function GetNewId() As Integer
table = DirectCast(Session("table"), DataTable)
If table.Rows.Count = 0 Then
Return 0
End If
Dim max As Integer = Convert.ToInt32(table.Rows(0)("ID"))
For i As Integer = 1 To table.Rows.Count - 1
If Convert.ToInt32(table.Rows(i)("ID")) > max Then
max = Convert.ToInt32(table.Rows(i)("ID"))
End If
Next i
Return max + 1
End Function
End Class