|
|
|
|
|
|
|
|
|
|
|---|---|---|---|---|---|---|---|---|
| Ms. | Nancy | Davolio | Sales Representative | (206) 555-9857 | Seattle | 12/8/1978 | 5/1/2005 |
|
| Dr. | Andrew | Fuller | Vice President, Sales | (206) 555-9482 | Tacoma | 2/19/1965 | 8/14/1992 |
|
| Ms. | Janet | Leverling | Sales Representative | (206) 555-3412 | Kirkland | 8/30/1985 | 4/1/2002 |
|
| Mrs. | Margaret | Peacock | Sales Representative | (206) 555-8122 | Redmond | 9/19/1973 | 5/3/1993 |
|
| Mr. | Steven | Buchanan | Sales Manager | (71) 555-4848 | London | 3/4/1955 | 10/17/1993 |
|
| Mr. | Michael | Suyama | Sales Representative | (71) 555-7773 | London | 7/2/1981 | 10/17/1999 |
|
| Mr. | Robert | King | Sales Representative | (71) 555-5598 | London | 5/29/1960 | 1/2/1994 |
|
| Ms. | Laura | Callahan | Inside Sales Coordinator | (206) 555-1189 | Seattle | 1/9/1985 | 3/5/2004 |
|
| Ms. | Anne | Dodsworth | Sales Representative | (71) 555-4444 | London | 1/27/1980 | 11/15/2004 |
|
Data grid with 9 rows and 9 columns
When EditCell mode is used, the DevExpress Blazor Grid displays an in-place editor when a user clicks a data cell. With the in-place editor, users can edit the current cell value and activate editors for other cells within the same row. When focus moves to a different row, the control validates user input and saves changes.
To enable cell editing, you must:
- Set the EditMode property to
EditCell. - 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 standard .NET value equality comparison to identify data items.
- Handle the following events to make 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. To enable the delete operation, implement step 4.
- (Optional) Declare a DxGridCommandColumn object in the Columns template to allow users to create and delete data rows. In addition to predefined New and Delete buttons, this column displays Edit, Save, and Cancel command buttons that are not used in this mode. Disable EditButtonVisible, CancelButtonVisible, and SaveButtonVisible properties to hide these buttons.
- (Optional) Handle the CustomizeEditModel event to initialize an edit model for new data rows.
To display an editor in a data cell, users can focus the cell and press Enter. When the editor is visible, the following keyboard shortcuts are available:
- Enter — Validates the cell value and hides the editor.
- Esc — Hides the editor and discards changes made in this cell. Pressing Esc when the editor is hidden discards all changes made in the row and cancels row editing.
- Tab/Shift+Tab — Hides the editor, focuses the next/previous data cell, and displays an editor in the newly focused cell.
For detailed information on how to enable data editing and use edit-related options, refer to the following help topic: Cell Editing in Blazor Grid.