CardViewCommandLayoutItem.CustomButtons Property

Gets the collection of custom buttons.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v19.2.dll

Declaration

C#

public CardViewCustomCommandButtonCollection CustomButtons { get; }

VB.NET

Public ReadOnly Property CustomButtons As CardViewCustomCommandButtonCollection

Property Value

Type	Description
CardViewCustomCommandButtonCollection	A CardViewCustomCommandButtonCollection object containing the collection of custom buttons.

Remarks

The command layout item can display custom buttons. You can create your own buttons and define custom actions for them by handling the ASPxCardView.CustomButtonCallback event.

Example

This example shows how to create and customize a custom command button. The custom “Filter” button CardViewCustomCommandButton is added to the CustomButtons collection. To define an action of the custom “Filter” button, the CustomButtonCallback event is handled.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/aspxcardview-how-to-create-a-custom-command-button-t285501

Default.aspx (C#)

<dx:ASPxCardView ID="ASPxCardView1" runat="server" DataSourceID="AccessDataSource1" KeyFieldName="CustomerID" AutoGenerateColumns="False" OnCustomButtonCallback="ASPxCardView1_CustomButtonCallback">
<SettingsBehavior AllowFocusedCard="true" />
<Columns>
    <dx:CardViewTextColumn FieldName="CompanyName" VisibleIndex="1">
    </dx:CardViewTextColumn>
    <dx:CardViewTextColumn FieldName="ContactName" VisibleIndex="2">
    </dx:CardViewTextColumn>
    <dx:CardViewTextColumn FieldName="City" VisibleIndex="5">
    </dx:CardViewTextColumn>
    <dx:CardViewTextColumn FieldName="Region" VisibleIndex="6">
    </dx:CardViewTextColumn>
    <dx:CardViewTextColumn FieldName="Country" VisibleIndex="8">
    </dx:CardViewTextColumn>
</Columns>
<CardLayoutProperties>
    <Items>
        <dx:CardViewCommandLayoutItem HorizontalAlign="Right">
        </dx:CardViewCommandLayoutItem>
        <dx:CardViewColumnLayoutItem ColumnName="Company Name">
        </dx:CardViewColumnLayoutItem>
        <dx:CardViewColumnLayoutItem ColumnName="Contact Name">
        </dx:CardViewColumnLayoutItem>
        <dx:CardViewColumnLayoutItem ColumnName="City">
        </dx:CardViewColumnLayoutItem>
        <dx:CardViewColumnLayoutItem ColumnName="Region">
        </dx:CardViewColumnLayoutItem>
        <dx:CardViewColumnLayoutItem ColumnName="Country">
        </dx:CardViewColumnLayoutItem>
        <dx:EditModeCommandLayoutItem HorizontalAlign="Right">
        </dx:EditModeCommandLayoutItem>
    </Items>
</CardLayoutProperties>
</dx:ASPxCardView>  
<br />
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT * FROM [Customers]" />  

Default.aspx.cs

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 = "FilterBtn";
        customBtn.Text = "Filter";
        return customBtn;
    }
    protected void ASPxCardView1_CustomButtonCallback(object sender, ASPxCardViewCustomButtonCallbackEventArgs e)
    {
        if (e.ButtonID == "FilterBtn")
        {
            ASPxCardView cardview = sender as ASPxCardView;
            cardview.FilterExpression = "[Country] like '%Germany%'";
        }
    }
}

Default.aspx.vb

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 = "FilterBtn"
        customBtn.Text = "Filter"
        Return customBtn
    End Function
    Protected Sub ASPxCardView1_CustomButtonCallback(ByVal sender As Object, ByVal e As ASPxCardViewCustomButtonCallbackEventArgs)
        If e.ButtonID = "FilterBtn" Then
            Dim cardview As ASPxCardView = TryCast(sender, ASPxCardView)
            cardview.FilterExpression = "[Country] like '%Germany%'"
        End If
    End Sub
End Class

Default.aspx (VB.NET)

<dx:ASPxCardView ID="ASPxCardView1" runat="server" DataSourceID="AccessDataSource1" KeyFieldName="CustomerID" AutoGenerateColumns="False" OnCustomButtonCallback="ASPxCardView1_CustomButtonCallback">
<SettingsBehavior AllowFocusedCard="true" />
<Columns>
    <dx:CardViewTextColumn FieldName="CompanyName" VisibleIndex="1">
    </dx:CardViewTextColumn>
    <dx:CardViewTextColumn FieldName="ContactName" VisibleIndex="2">
    </dx:CardViewTextColumn>
    <dx:CardViewTextColumn FieldName="City" VisibleIndex="5">
    </dx:CardViewTextColumn>
    <dx:CardViewTextColumn FieldName="Region" VisibleIndex="6">
    </dx:CardViewTextColumn>
    <dx:CardViewTextColumn FieldName="Country" VisibleIndex="8">
    </dx:CardViewTextColumn>
</Columns>
<CardLayoutProperties>
    <Items>
        <dx:CardViewCommandLayoutItem HorizontalAlign="Right">
        </dx:CardViewCommandLayoutItem>
        <dx:CardViewColumnLayoutItem ColumnName="Company Name">
        </dx:CardViewColumnLayoutItem>
        <dx:CardViewColumnLayoutItem ColumnName="Contact Name">
        </dx:CardViewColumnLayoutItem>
        <dx:CardViewColumnLayoutItem ColumnName="City">
        </dx:CardViewColumnLayoutItem>
        <dx:CardViewColumnLayoutItem ColumnName="Region">
        </dx:CardViewColumnLayoutItem>
        <dx:CardViewColumnLayoutItem ColumnName="Country">
        </dx:CardViewColumnLayoutItem>
        <dx:EditModeCommandLayoutItem HorizontalAlign="Right">
        </dx:EditModeCommandLayoutItem>
    </Items>
</CardLayoutProperties>
</dx:ASPxCardView>  
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT * FROM [Customers]" />