How to: Customize Command Buttons in Individual Cards
- 5 minutes to read
The following example handles the ASPxCardView.CommandButtonInitialize event to hide a command button in individual cards.
- Default.aspx.cs
- Default.aspx (C#)
- CardViewDataHelper.cs
- Default.aspx (VB.NET)
- Default.aspx.vb
- CardViewDataHelper.vb
using System;
using DevExpress.Web;
public partial class _Default : System.Web.UI.Page {
protected void Page_Init(object sender, EventArgs e) {
ASPxCardView1.DataSource = CardViewDataHelper.Data;
ASPxCardView1.DataBind();
}
protected void ASPxCardView1_CommandButtonInitialize(object sender, ASPxCardViewCommandButtonEventArgs e) {
bool isOddRow = e.VisibleIndex % 2 == 0;
if(isOddRow) {
if(e.ButtonType == CardViewCommandButtonType.Edit)
e.Enabled = false;
if(e.ButtonType == CardViewCommandButtonType.New)
e.Enabled = false;
if(e.ButtonType == CardViewCommandButtonType.Delete)
e.Enabled = false;
}
}
protected void ASPxCardView1_CardInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e) {
CardViewDataHelper.InsertCard(sender, e);
}
protected void ASPxCardView1_CardUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) {
CardViewDataHelper.UpdateCard(sender, e);
}
protected void ASPxCardView1_CardDeleting(object sender, DevExpress.Web.Data.ASPxDataDeletingEventArgs e) {
CardViewDataHelper.DeleteCard(sender, e);
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v15.2, Version=15.2.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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxCardView ID="ASPxCardView1" KeyFieldName="ID" AutoGenerateColumns="False" runat="server"
OnCommandButtonInitialize="ASPxCardView1_CommandButtonInitialize" ClientInstanceName="card"
OnCardInserting="ASPxCardView1_CardInserting" OnCardUpdating="ASPxCardView1_CardUpdating" OnCardDeleting="ASPxCardView1_CardDeleting">
<Columns>
<dx:CardViewTextColumn FieldName="ID" VisibleIndex="0" ReadOnly="true">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="Data" VisibleIndex="1">
</dx:CardViewTextColumn>
</Columns>
<CardLayoutProperties>
<Items>
<dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowEditButton="True" ShowDeleteButton="true" ShowNewButton="true">
</dx:CardViewCommandLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="Data">
</dx:CardViewColumnLayoutItem>
<dx:EditModeCommandLayoutItem HorizontalAlign="Right">
</dx:EditModeCommandLayoutItem>
</Items>
</CardLayoutProperties>
</dx:ASPxCardView>
</div>
</form>
</body>
</html>
using DevExpress.Web;
using System;
using System.Collections.Specialized;
using System.Data;
using System.Web;
public static class CardViewDataHelper {
public static DataTable Data {
get {
if(HttpContext.Current.Session["data"] == null) {
var 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() });
}
HttpContext.Current.Session["data"] = table;
}
return (DataTable)HttpContext.Current.Session["data"];
}
}
public static void InsertCard(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e) {
InsertRow(e.NewValues);
BindCardView(sender as ASPxCardView);
e.Cancel = true;
}
public static void UpdateCard(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) {
UpdateRow(e.NewValues, (int)e.Keys[0]);
BindCardView(sender as ASPxCardView);
e.Cancel = true;
}
public static void DeleteCard(object sender, DevExpress.Web.Data.ASPxDataDeletingEventArgs e) {
DeleteRow((int)e.Keys[0]);
BindCardView(sender as ASPxCardView);
e.Cancel = true;
}
static void BindCardView(ASPxCardView cv) {
cv.CancelEdit();
cv.DataSource = Data;
cv.DataBind();
}
static int GetNewId(DataTable 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;
}
static void UpdateRow(OrderedDictionary newValues, int ID) {
var row = Data.Rows.Find(ID);
row["Data"] = newValues["Data"];
}
static void InsertRow(OrderedDictionary newValues) {
DataRow row = Data.NewRow();
row["ID"] = GetNewId(Data);
row["Data"] = newValues["Data"];
Data.Rows.Add(row);
}
static void DeleteRow(int ID) {
var row = Data.Rows.Find(ID);
Data.Rows.Remove(row);
}
}
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v15.2, Version=15.2.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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxCardView ID="ASPxCardView1" KeyFieldName="ID" AutoGenerateColumns="False" runat="server"
OnCommandButtonInitialize="ASPxCardView1_CommandButtonInitialize" ClientInstanceName="card"
OnCardInserting="ASPxCardView1_CardInserting" OnCardUpdating="ASPxCardView1_CardUpdating" OnCardDeleting="ASPxCardView1_CardDeleting">
<Columns>
<dx:CardViewTextColumn FieldName="ID" VisibleIndex="0" ReadOnly="true">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="Data" VisibleIndex="1">
</dx:CardViewTextColumn>
</Columns>
<CardLayoutProperties>
<Items>
<dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowEditButton="True" ShowDeleteButton="true" ShowNewButton="true">
</dx:CardViewCommandLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="Data">
</dx:CardViewColumnLayoutItem>
<dx:EditModeCommandLayoutItem HorizontalAlign="Right">
</dx:EditModeCommandLayoutItem>
</Items>
</CardLayoutProperties>
</dx:ASPxCardView>
</div>
</form>
</body>
</html>
Imports System
Imports DevExpress.Web
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
ASPxCardView1.DataSource = CardViewDataHelper.Data
ASPxCardView1.DataBind()
End Sub
Protected Sub ASPxCardView1_CommandButtonInitialize(ByVal sender As Object, ByVal e As ASPxCardViewCommandButtonEventArgs)
Dim isOddRow As Boolean = e.VisibleIndex Mod 2 = 0
If isOddRow Then
If e.ButtonType = CardViewCommandButtonType.Edit Then
e.Enabled = False
End If
If e.ButtonType = CardViewCommandButtonType.[New] Then
e.Enabled = False
End If
If e.ButtonType = CardViewCommandButtonType.Delete Then
e.Enabled = False
End If
End If
End Sub
Protected Sub ASPxCardView1_CardInserting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataInsertingEventArgs)
CardViewDataHelper.InsertCard(sender, e)
End Sub
Protected Sub ASPxCardView1_CardUpdating(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataUpdatingEventArgs)
CardViewDataHelper.UpdateCard(sender, e)
End Sub
Protected Sub ASPxCardView1_CardDeleting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataDeletingEventArgs)
CardViewDataHelper.DeleteCard(sender, e)
End Sub
End Class
Option Infer On
Imports DevExpress.Web
Imports System
Imports System.Collections.Specialized
Imports System.Data
Imports System.Web
Public NotInheritable Class CardViewDataHelper
Private Sub New()
End Sub
Public Shared ReadOnly Property Data() As DataTable
Get
If HttpContext.Current.Session("data") Is Nothing Then
Dim 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
HttpContext.Current.Session("data") = table
End If
Return DirectCast(HttpContext.Current.Session("data"), DataTable)
End Get
End Property
Public Shared Sub InsertCard(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataInsertingEventArgs)
InsertRow(e.NewValues)
BindCardView(TryCast(sender, ASPxCardView))
e.Cancel = True
End Sub
Public Shared Sub UpdateCard(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataUpdatingEventArgs)
UpdateRow(e.NewValues, CInt((e.Keys(0))))
BindCardView(TryCast(sender, ASPxCardView))
e.Cancel = True
End Sub
Public Shared Sub DeleteCard(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataDeletingEventArgs)
DeleteRow(CInt((e.Keys(0))))
BindCardView(TryCast(sender, ASPxCardView))
e.Cancel = True
End Sub
Private Shared Sub BindCardView(ByVal cv As ASPxCardView)
cv.CancelEdit()
cv.DataSource = Data
cv.DataBind()
End Sub
Private Shared Function GetNewId(ByVal table As DataTable) As Integer
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
Private Shared Sub UpdateRow(ByVal newValues As OrderedDictionary, ByVal ID As Integer)
Dim row = Data.Rows.Find(ID)
row("Data") = newValues("Data")
End Sub
Private Shared Sub InsertRow(ByVal newValues As OrderedDictionary)
Dim row As DataRow = Data.NewRow()
row("ID") = GetNewId(Data)
row("Data") = newValues("Data")
Data.Rows.Add(row)
End Sub
Private Shared Sub DeleteRow(ByVal ID As Integer)
Dim row = Data.Rows.Find(ID)
Data.Rows.Remove(row)
End Sub
End Class