The example demonstrates how to specify the CommandButtons and Custom CommandButtons properties by handling the CommandButtonInitialize and CustomButtonInitialize events. The DataRows’ VisibleIndex property and criteria set based on field values are used to determine the buttons’ visibility.
<%@ 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" runat="server" DataSourceID="AccessDataSource1" OnCustomButtonInitialize="ASPxCardView1_CustomButtonInitialize" OnCommandButtonInitialize="ASPxCardView1_CommandButtonInitialize" KeyFieldName="ProductID" AutoGenerateColumns="False">
<ClientSideEvents CustomButtonClick="function(s, e) {
alert('keyValue = ' + s.GetCardKey(e.visibleIndex));
}" />
<SettingsBehavior AllowFocusedCard="true" />
<Columns>
<dx:CardViewTextColumn FieldName="ProductID" VisibleIndex="2" ReadOnly="True">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="ProductName" VisibleIndex="0">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="UnitPrice" VisibleIndex="1">
</dx:CardViewTextColumn>
</Columns>
<CardLayoutProperties>
<Items>
<dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowDeleteButton="True" ShowEditButton="True">
</dx:CardViewCommandLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="ProductID">
</dx:CardViewColumnLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="Product Name">
</dx:CardViewColumnLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="UnitPrice">
</dx:CardViewColumnLayoutItem>
</Items>
</CardLayoutProperties>
</dx:ASPxCardView>
<br />
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice] FROM [Products]" DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = ?" InsertCommand="INSERT INTO [Products] ([ProductID], [ProductName], [UnitPrice]) VALUES (?, ?, ?)" UpdateCommand="UPDATE [Products] SET [ProductName] = ?, [UnitPrice] = ? WHERE [ProductID] = ?" >
<DeleteParameters>
<asp:Parameter Name="ProductID" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="ProductID" Type="Int32" />
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Decimal" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Decimal" />
<asp:Parameter Name="ProductID" Type="Int32" />
</UpdateParameters>
</asp:AccessDataSource>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Utils;
using DevExpress.Web;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
(ASPxCardView1.CardLayoutProperties.Items[0] as CardViewCommandLayoutItem).CustomButtons.Add(CreateCustomButton());
}
}
CardViewCustomCommandButton CreateCustomButton()
{
CardViewCustomCommandButton customBtn = new CardViewCustomCommandButton();
customBtn.ID = "CustomBtn";
customBtn.Text = "Custom button";
return customBtn;
}
protected void ASPxCardView1_CommandButtonInitialize(object sender, ASPxCardViewCommandButtonEventArgs e)
{
if (e.VisibleIndex == -1) return;
switch (e.ButtonType)
{
case CardViewCommandButtonType.Edit:
e.Visible = EditButtonVisibleCriteria((ASPxCardView)sender, e.VisibleIndex);
break;
case CardViewCommandButtonType.Delete:
e.Visible = DeleteButtonVisibleCriteria((ASPxCardView)sender, e.VisibleIndex);
break;
}
}
private bool EditButtonVisibleCriteria(ASPxCardView grid, int visibleIndex)
{
object card = grid.GetDataRow(visibleIndex);
return ((DataRow)card)["ProductName"].ToString().Contains("a");
}
private bool DeleteButtonVisibleCriteria(ASPxCardView grid, int visibleIndex)
{
object card = grid.GetDataRow(visibleIndex);
return ((DataRow)card)["ProductName"].ToString().Contains("b");
}
protected void ASPxCardView1_CustomButtonInitialize(object sender, ASPxCardViewCustomCommandButtonEventArgs e)
{
if (e.VisibleIndex == -1) return;
if (e.ButtonID == "CustomBtn" && e.VisibleIndex % 2 != 0)
e.Visible = DefaultBoolean.False;
}
}
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports DevExpress.Utils
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 Not IsPostBack Then
TryCast(ASPxCardView1.CardLayoutProperties.Items(0), CardViewCommandLayoutItem).CustomButtons.Add(CreateCustomButton())
End If
End Sub
Private Function CreateCustomButton() As CardViewCustomCommandButton
Dim customBtn As New CardViewCustomCommandButton()
customBtn.ID = "CustomBtn"
customBtn.Text = "Custom button"
Return customBtn
End Function
Protected Sub ASPxCardView1_CommandButtonInitialize(ByVal sender As Object, ByVal e As ASPxCardViewCommandButtonEventArgs)
If e.VisibleIndex = -1 Then
Return
End If
Select Case e.ButtonType
Case CardViewCommandButtonType.Edit
e.Visible = EditButtonVisibleCriteria(DirectCast(sender, ASPxCardView), e.VisibleIndex)
Case CardViewCommandButtonType.Delete
e.Visible = DeleteButtonVisibleCriteria(DirectCast(sender, ASPxCardView), e.VisibleIndex)
End Select
End Sub
Private Function EditButtonVisibleCriteria(ByVal grid As ASPxCardView, ByVal visibleIndex As Integer) As Boolean
Dim card As Object = grid.GetDataRow(visibleIndex)
Return DirectCast(card, DataRow)("ProductName").ToString().Contains("a")
End Function
Private Function DeleteButtonVisibleCriteria(ByVal grid As ASPxCardView, ByVal visibleIndex As Integer) As Boolean
Dim card As Object = grid.GetDataRow(visibleIndex)
Return DirectCast(card, DataRow)("ProductName").ToString().Contains("b")
End Function
Protected Sub ASPxCardView1_CustomButtonInitialize(ByVal sender As Object, ByVal e As ASPxCardViewCustomCommandButtonEventArgs)
If e.VisibleIndex = -1 Then
Return
End If
If e.ButtonID = "CustomBtn" AndAlso e.VisibleIndex Mod 2 <> 0 Then
e.Visible = DefaultBoolean.False
End If
End Sub
End Class
<%@ 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" runat="server" DataSourceID="AccessDataSource1" OnCustomButtonInitialize="ASPxCardView1_CustomButtonInitialize" OnCommandButtonInitialize="ASPxCardView1_CommandButtonInitialize" KeyFieldName="ProductID" AutoGenerateColumns="False">
<ClientSideEvents CustomButtonClick="function(s, e) {
alert('keyValue = ' + s.GetCardKey(e.visibleIndex));
}" />
<SettingsBehavior AllowFocusedCard="true" />
<Columns>
<dx:CardViewTextColumn FieldName="ProductID" VisibleIndex="2" ReadOnly="True">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="ProductName" VisibleIndex="0">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="UnitPrice" VisibleIndex="1">
</dx:CardViewTextColumn>
</Columns>
<CardLayoutProperties>
<Items>
<dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowDeleteButton="True" ShowEditButton="True">
</dx:CardViewCommandLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="ProductID">
</dx:CardViewColumnLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="Product Name">
</dx:CardViewColumnLayoutItem>
<dx:CardViewColumnLayoutItem ColumnName="UnitPrice">
</dx:CardViewColumnLayoutItem>
</Items>
</CardLayoutProperties>
</dx:ASPxCardView>
<br />
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice] FROM [Products]" DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = ?" InsertCommand="INSERT INTO [Products] ([ProductID], [ProductName], [UnitPrice]) VALUES (?, ?, ?)" UpdateCommand="UPDATE [Products] SET [ProductName] = ?, [UnitPrice] = ? WHERE [ProductID] = ?" >
<DeleteParameters>
<asp:Parameter Name="ProductID" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="ProductID" Type="Int32" />
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Decimal" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Decimal" />
<asp:Parameter Name="ProductID" Type="Int32" />
</UpdateParameters>
</asp:AccessDataSource>
</div>
</form>
</body>
</html>