HomeGridEdit DataEdit Row
Version: 24.1.7
Copyright © 2000-2024 Developer Express Inc

Edit Row

 
First Name Last Name Title Title Of Courtesy Birth Date Hire Date
Nancy Davolio Sales Representative Ms. 12/8/1978 5/1/2005
Andrew Fuller Vice President, Sales Dr. 2/19/1965 8/14/1992
Janet Leverling Sales Representative Ms. 8/30/1985 4/1/2002
Margaret Peacock Sales Representative Mrs. 9/19/1973 5/3/1993
Steven Buchanan Sales Manager Mr. 3/4/1955 10/17/1993
Michael Suyama Sales Representative Mr. 7/2/1981 10/17/1999
Robert King Sales Representative Mr. 5/29/1960 1/2/1994
Laura Callahan Inside Sales Coordinator Ms. 1/9/1985 3/5/2004
Anne Dodsworth Sales Representative Ms. 1/27/1980 11/15/2004
Data grid with 9 rows and 7 columns

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.