DxGridCommandColumn Class
A command column.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
Declaration
public class DxGridCommandColumn :
DxGridColumn,
IGridCommandColumn,
IGridColumnRemarks
The command column displays predefined New, Edit, and Delete command buttons for data rows in display mode. In EditRow and EditCell edit modes, this column displays Save and Cancel buttons for the edited row. In the filter row, the column displays the Clear button.
Add a Command Column
Declare a DxGridCommandColumn object in the Columns template. Use the Width property to specify the column width. The FixedPosition property allows you freeze the column and keep it visible on a screen while users scroll the Grid horizontally.
To hide unnecessary command buttons, disable the following properties:
- CancelButtonVisible
- ClearFilterButtonVisible
- DeleteButtonVisible
- EditButtonVisible
- NewButtonVisible
- SaveButtonVisible
The following code snippet hides Delete buttons:
<DxGrid Data="GridDataSource"
...>
<Columns>
<DxGridCommandColumn Width="150px" DeleteButtonVisible="false" />
@*...*@
</Columns>
</DxGrid>
Edit Data
When a user clicks the New or Edit button, the Grid starts editing the corresponding row. Handle the EditStart event to create a custom response to a start edit action. To create a custom response to a Cancel button click, handle the EditCanceling event.
The EditModelSaving event fires when a user clicks the Save button and validation is passed. Handle this event to make final data changes, check access permissions, post changes to the underlying data source, and reload Grid data.
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, delete a data item from the underlying data source, and reload Grid data.
The following code snippet allows users to edit data in the edit form:
@page "/"
@using Microsoft.EntityFrameworkCore
@using BindToData.Models
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
<DxGrid Data="Data"
CustomizeEditModel="OnCustomizeEditModel"
EditModelSaving="OnEditModelSaving"
DataItemDeleting="OnDataItemDeleting"
KeyFieldName="EmployeeId">
<Columns>
<DxGridCommandColumn />
<DxGridDataColumn FieldName="FirstName" />
<DxGridDataColumn FieldName="LastName" />
<DxGridDataColumn FieldName="Title" />
<DxGridDataColumn FieldName="HireDate" />
</Columns>
<EditFormTemplate Context="editFormContext">
<DxFormLayout>
<DxFormLayoutItem Caption="First Name:">
@editFormContext.GetEditor("FirstName")
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Last Name:">
@editFormContext.GetEditor("LastName")
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Title:">
@editFormContext.GetEditor("Title")
</DxFormLayoutItem>
<DxFormLayoutItem Caption="Hire Date:">
@editFormContext.GetEditor("HireDate")
</DxFormLayoutItem>
</DxFormLayout>
</EditFormTemplate>
</DxGrid>
@code {
IEnumerable<Employee> Data { get; set; }
NorthwindContext Northwind { get; set; }
protected override async Task OnInitializedAsync() {
Northwind = NorthwindContextFactory.CreateDbContext();
Data = await Northwind.Employees.ToListAsync();
}
void OnCustomizeEditModel(GridCustomizeEditModelEventArgs e) {
if(e.IsNew) {
var editModel = (Employee)e.EditModel;
editModel.EmployeeId = Data.Max(x => x.EmployeeId) + 1;
}
}
async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
var editModel = (Employee)e.EditModel;
// Assign changes from the edit model to the data item.
if (e.IsNew)
await Northwind.AddAsync(editModel);
else
e.CopyChangesToDataItem();
// Post changes to the database.
await Northwind.SaveChangesAsync();
// Reload the entire Grid.
Data = await Northwind.Employees.ToListAsync();
}
async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
// Remove the data item from the database.
Northwind.Remove(e.DataItem);
await Northwind.SaveChangesAsync();
// Reload the entire Grid.
Data = await Northwind.Employees.ToListAsync();
}
public void Dispose() {
Northwind?.Dispose();
}
}
You can define the column’s CellDisplayTemplate, CellEditTemplate, and HeaderTemplate to implement custom command elements.
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.
@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" />
<DxGridCommandColumn />
</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();
}
}
You can define the FilterRowCellTemplate to display custom content in the command column’s filter row cell.