DxDataGrid<T>.EditMode Property

Specifies how users edit grid data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public DataGridEditMode EditMode { get; set; }

Property Value

Type Description
DataGridEditMode

A DevExpress.Blazor.DataGridEditMode enumeration value.

Available values:

Name Description
EditForm

The Data Grid displays the Edit Form instead of the edited row.

PopupEditForm

The Data Grid displays the Edit Form in a pop-up window.

Remarks

The Data Grid allows users to edit data. Do the following to enable this functionality:

  1. Add DxDataGridCommandColumn to the Data Grid. This column displays the New, Edit, and Remove command buttons.
  2. Handle the following events to post changes to an underlying data source:
  3. Handle the InitNewRow event to initialize new data rows.
  4. Specify the key data field to enable the Data Grid to identify individual data items.

The Data Grid displays the Edit Form when a user clicks New or Edit. This form consists of data editors for each visible column. The editor type depends on the corresponding column’s type. You can use the EditorVisible property to hide an editor from the edit form.

Use the EditMode property to specify edit mode:

DataGrid Edit Form

DataGrid Popup Edit Form

NOTE

If virtual scroll mode is enabled, the Data Grid shows the Edit Form in a pop-up window regardless of the EditMode property value.

@inject SupplierService supplierService

<DxDataGrid Data="@supplierService.GetSuppliersAsync"
            RowRemovingAsync="@OnRowRemoving"
            RowUpdatingAsync="@OnRowUpdating"
            RowInsertingAsync="@OnRowInserting"
            InitNewRow="@OnInitNewRow"
            EditMode="DataGridEditMode.PopupEditForm"
            KeyFieldName="Id">
    @*...*@
</DxDataGrid>

Online Demo

Run Demo: Data Grid - Edit Data

See Also