DxDataGridCommandColumn Class

A command column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

public class DxDataGridCommandColumn :
    DxDataGridColumnBase<ICommandColumnModel>

Remarks

Important

The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

A command column contains buttons that allow users to update (create, edit, remove) rows and to clear values in the filter row.

Command Column

Run Demo: Data Grid - Column Types

Watch Video: Get Started with Data Grid

Add a Column

Add the <DxDataGridCommandColumn/> tag to a Data Grid component’s markup. Use the Width property to specify the column’s width.

<DxDataGrid ...>
    <DxDataGridCommandColumn Width="150px"/>
    @* ... *@
</DxDataGrid>

Column Appearance and Visibility

Use the following properties to customize column visibility.

Property Description
ShowInColumnChooser Specifies if the column is displayed in the Column Chooser.
Visible Specifies if the column is visible in the grid.
VisibleIndex Specifies the column’s visible index.

To change the visibility of column buttons, use the following properties.

Property Description
NewButtonVisible Specifies if the New button is visible.
EditButtonVisible Specifies if the Edit button is visible.
DeleteButtonVisible Specifies if the Delete button is visible.
ClearFilterButtonVisible Specifies if the Clear button is visible.

You can also change the appearance of command buttons. Refer to the following example: How to use icons instead of default command buttons.

Templates

You can implement templates for the command column:

Edit Data

When users click the New or Edit button, the grid displays the Edit Form where users can change data. To post the changes to a data source, you should implement handlers for the following events:

Specify the key data field to enable the Data Grid to identify individual data items.

<DxDataGrid @ref="@grid"
            Data="@Data"
            RowRemovingAsync="@OnRowRemovingAsync"
            RowUpdatingAsync="@OnRowUpdatingAsync"
            RowInsertingAsync="@OnRowInsertingAsync"
            InitNewRow="@OnInitNewRowAsync"
            ShowPager="false"
            KeyFieldName="@nameof(Employee.EmployeeId)"
            EditMode="DataGridEditMode.EditForm">
    @* ... *@
</DxDataGrid>

Data Grid - Command column

You can also set the EditMode property to DataGridEditMode.PopupEditForm to display the Edit Form in a pop-up window.

Run Demo: Data Grid - Edit Modes

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DxSettingsComponent
DxDataColumnBase
DxDataColumnBase<DevExpress.Blazor.Internal.Grid.ICommandColumnModel>
DxDataGridColumnBase<DevExpress.Blazor.Internal.Grid.ICommandColumnModel>
DxDataGridCommandColumn
See Also