Edit Row

 
First Name Last Name Title Title Of Courtesy Birth Date Hire Date
NancyDavolioSales RepresentativeMs.12/8/19785/1/2005
AndrewFullerVice President, SalesDr.2/19/19658/14/1992
JanetLeverlingSales RepresentativeMs.8/30/19854/1/2002
MargaretPeacockSales RepresentativeMrs.9/19/19735/3/1993
StevenBuchananSales ManagerMr.3/4/195510/17/1993
MichaelSuyamaSales RepresentativeMr.7/2/198110/17/1999
RobertKingSales RepresentativeMr.5/29/19601/2/1994
LauraCallahanInside Sales CoordinatorMs.1/9/19853/5/2004
AnneDodsworthSales RepresentativeMs.1/27/198011/15/2004
Data grid with 9 rows and 7 columns
0 rows are selected

The DevExpress Blazor Grid allows users to edit its data in the inline edit row. The control automatically generates and configures cell editors for individual columns based on associated data types. To enable this functionality, follow the steps below:

  1. Declare a DxGridCommandColumn object in the Columns template. This column displays predefined New, Edit, Save, Cancel, and Delete command buttons.
  2. Set the EditMode property to EditRow.
  3. Handle the following events to make any final data changes, check access permissions, post changes to the underlying data source, and reload Grid data:
    • EditModelSaving — Fires when a user saves the edited row and validation passes.
    • DataItemDeleting — Fires when a user confirms the delete operation in the delete confirmation dialog.
  4. If your data object has a primary key, assign it to the KeyFieldName or KeyFieldNames property. The Grid uses field values to compare and identify data items. If you do not specify these properties, the Grid uses the standard .NET value equality comparison to identify data items.
  5. (Optional) Handle the CustomizeEditModel event to initialize an edit model for new data rows.

For detailed information on how to enable data editing and use edit-related options, refer to the following help topic: Inline Edit Row in Blazor Grid.