Skip to main content
Tab

ASPxCardView.CardLayoutProperties Property

Provides access to the settings allowing you to customize a card layout.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v23.2.dll

NuGet Package: DevExpress.Web

Declaration

[DefaultValue(null)]
public CardViewFormLayoutProperties CardLayoutProperties { get; }

Property Value

Type Default Description
CardViewFormLayoutProperties null

A CardViewFormLayoutProperties object that contains the card layout settings.

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.

<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]" />  
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%'";
        }
    }
}
See Also