Command Cells

• Feb 01, 2023

The ASP.NET MVC VerticalGrid extension provides a command row that allows end-users to manipulate its data (switch the VerticalGrid to edit mode, add new records, select and deselect records, etc.). Command rows display command cells. A command cell displays command items.

The code sample below demonstrates how to enable the display of a command row with command items within its command cells.

C#

@Html.DevExpress().VerticalGrid(settings =>
{
    settings.Name = "verticalGrid";
    // ...
    // Make the command row visible
    settings.CommandRow.Visible = true;
    // Enable the required command items displayed within the command cells
    settings.CommandRow.ShowNewButton = true;
    settings.CommandRow.ShowDeleteButton = true;
    settings.CommandRow.ShowEditButton = true;

    settings.Rows.Add("FirstName");
    settings.Rows.Add("LastName");
    // ...
}).Bind(Model).GetHtml()

The image below demonstrates the result.

Customizing Command Cells Using Style Settings

You can customize command cells using the common style settings for the entire command row using the VerticalGridStyles.CommandRowRecord (through VerticalGridSettings.Styles.CommandRowRecord) property, as shown in the code sample below.

C#

@Html.DevExpress().VerticalGrid(settings =>
{
    settings.Name = "verticalGrid";
    // ...
    settings.CommandRow.Visible = true;
    // Define the background color for the entire command row
    settings.Styles.CommandRowRecord.BackColor = System.Drawing.Color.AliceBlue;
    // ...
}).Bind(Model).GetHtml()

The image below illustrates the result.