HomeGridEdit DataEdit Row
Version: 22.2.4
Copyright © 2000-2023 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

The DevExpress Blazor Grid allows users to edit its data in the inline edit row. 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 GridEditMode.EditRow.

  3. Specify the CellEditTemplate for each column to define Grid edit row content.

    You can also specify the DataColumnCellEditTemplate to define a common template for Grid edit row cells (this technique is used in the Edit Row Input Validation demo).

  4. Handle the following events to validate user input, access permissions, and post changes to an underlying data source:

    • 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.

    Note that Grid data must be reloaded once you save information to the data source.

  5. 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.

  6. (Optional) Handle the CustomizeEditModel event to initialize an edit model for new data rows.

For more information on how to enable data editing and use edit-related options, refer to the following help topic: Edit Data and Validate Input.

This demo comes with an enabled Integrated editor render mode. In this mode, the Grid renders editors in filter rows so that they occupy the entire cell; editor borders are not displayed.