DxDataGridCommandColumn Class

A command column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

public class DxDataGridCommandColumn :
    DxDataGridColumnBase<ICommandColumnModel>

Remarks

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 Data="@DataSource"
            ShowFilterRow="true"
            RowInserting="@((newValues) => OnRowInserting(newValues))"
            RowUpdating="@((updatingDataItem, newValues) => OnRowUpdating(updatingDataItem, newValues))"
            RowRemoving="@((dataItem) => OnRowRemoving(dataItem))"
            KeyFieldName="Id">
    ...
</DxDataGrid>

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

Inheritance

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