Command Cells

• Feb 02, 2023

The DevExpress ASP.NET MVC CardView extension provides command items that allow end-users to manipulate grid data (switch the card view to edit mode, update data, select and deselect cards, etc.). The card view stores its command items in command cells.

The code sample below demonstrates how to show the “Edit” command item in a command cell.

C#

@Html.DevExpress().CardView(settings =>
{
    settings.Name = "CardView";
    // ...
    // Enable the "Edit" command item
    settings.CardLayoutProperties.Items.AddCommandItem(i => {
        i.ShowEditButton = true;
        i.ColumnSpan = 3;
        i.HorizontalAlign = FormLayoutHorizontalAlign.Right;
    });
}).Bind(Model).GetHtml()

The image below demonstrates the result.

Customize Command Cells using Style Settings

The Card View allows you to customize command cells using the command column’s style settings (CardViewStyles.CommandItem).

C#

@Html.DevExpress().CardView(settings =>
{
    settings.Name = "CardView";
    // ...
    settings.Styles.CommandItem.ForeColor = System.Drawing.Color.Red;
    // ...
}).Bind(Model).GetHtml()

The image below illustrates the result.