Skip to main content

DxGridCommandColumn Class

A command column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

Declaration

public class DxGridCommandColumn :
    DxGridColumn,
    IGridCommandColumn,
    IGridColumn

Remarks

A command column displays CRUD-related buttons (New, Edit, and Delete) and the Clear button that resets values in the filter row.

Blazor Grid Command Column

In EditRow edit mode, the column also displays the Save and Cancel buttons.

Blazor Grid Inline Edit Row

Add a Command Column

Declare a DxGridCommandColumn object in the Columns template. Use the Width property to specify the column width.

<DxGrid Data="GridDataSource"
        ...>
    <Columns>
        <DxGridCommandColumn Width="150px"/>
        @*...*@
    </Columns>
</DxGrid>

Edit Data

When a user clicks the New or Edit button, the Grid displays either the edit form or edit row. Use the EditFormTemplate or CellEditTemplate property to define the edit form/edit row content. The EditMode property specifies current edit mode. The EditModelSaving event fires when a user submits the edit form and validation is passed. Handle this event to check user input and access permissions and post changes to an underlying data source.

When the user clicks the Delete button, the delete confirmation dialog appears. The DataItemDeleting event fires when the user confirms the delete operation. Handle this event to check user access permissions and delete a data item from an underlying data source.

Blazor Grid Editing

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        KeyFieldName="EmployeeId">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <EditFormTemplate Context="editFormContext">
        @{
            var employee = (Employee)editFormContext.EditModel;
        }
        <DxFormLayout>
            <DxFormLayoutItem Caption="First Name:">
                <DxTextBox @bind-Text="@employee.FirstName" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:">
                <DxTextBox @bind-Text="@employee.LastName" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Title:">
                <DxTextBox @bind-Text="@employee.Title" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:">
                <DxDateEdit @bind-Date="@employee.HireDate" />
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    IEnumerable<object> GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = await Northwind.Employees.ToListAsync();
    }

    async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
        var editModel = (Employee)e.EditModel;
        // Re-query a data item from the database.
        var dataItem = e.IsNew ? new Employee() : Northwind.Employees.Find(editModel.EmployeeId);
        // Assign changes from the edit model to the data item.
        if (dataItem != null) {
            dataItem.FirstName = editModel.FirstName;
            dataItem.LastName = editModel.LastName;
            dataItem.Title = editModel.Title;
            dataItem.HireDate = editModel.HireDate;
            // Post changes to the database.
            if (e.IsNew)
                await Northwind.AddAsync(dataItem);
            await Northwind.SaveChangesAsync();
            // Reload the entire Grid.
            GridDataSource = await Northwind.Employees.ToListAsync();
        }
    }

    async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
        // Re-query a data item from the database.
        var dataItem = Northwind.Employees.Find((e.DataItem as Employee).EmployeeId);
        if (dataItem != null) {
            // Remove the data item from the database.
            Northwind.Remove(dataItem);
            await Northwind.SaveChangesAsync();
            // Reload the entire Grid.
            GridDataSource = await Northwind.Employees.ToListAsync();
        }
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

To hide unnecessary command buttons, disable the NewButtonVisible, EditButtonVisible, SaveButtonVisible, CancelButtonVisible, and/or DeleteButtonVisible options.

You can also define the column’s CellDisplayTemplate and HeaderTemplate to implement custom command elements.

Tip

For more information on how to enable data editing, refer to the following topic: Edit Data and Validate Input.

Watch Video: Grid - Edit Data

Filter Data

Enable the ShowFilterRow option to activate the filter row. This row displays in-place text editors for all data columns. When a user types into an editor, the Grid creates a filter condition based on the editor value and applies this condition to the corresponding column.

The user can click the Clear button in the command column to reset the entire filter.

Blazor Grid Filter Row Command Column

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="@Data"
        ShowFilterRow="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" Caption="Order ID" DisplayFormat="d" />
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
        <DxGridDataColumn FieldName="ProductName"
                          FilterRowValue='"Queso"'
                          FilterRowOperatorType="GridFilterRowOperatorType.Contains" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" />
        <DxGridDataColumn FieldName="Shipped" UnboundType="GridUnboundColumnType.Boolean"
                          UnboundExpression="[ShippedDate] <> Null">
            <CellDisplayTemplate>
                <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
            </CellDisplayTemplate>
        </DxGridDataColumn>
        <DxGridCommandColumn NewButtonVisible="false"
                             EditButtonVisible="false"
                             DeleteButtonVisible="false"/>
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Data = Northwind.Invoices
            .ToList();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

To hide the Clear button, disable the column’s ClearFilterButtonVisible option. You can also define the FilterRowCellTemplate to display custom content in the filter row cell.

Run Demo: Data Grid - Filter Row

Inheritance

Object
ComponentBase
DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent
DxGridColumn
DxGridCommandColumn
See Also