Edit Forms

Our DevExpress Blazor Grid supports different edit modes. In EditForm mode (default), the Grid displays the edit form instead of the edited data row. In PopupEditForm mode, the Grid displays the edit form in a pop-up window.

Follow the steps below to enable data editing using an edit form:

1. Declare a DxGridCommandColumn object in the Columns template. This column displays predefined New, Edit, and Delete command buttons.
2. The default edit form displays only Save and Cancel buttons. Use the EditFormTemplate to populate edit form with editors. You can add custom editors or call the GetEditor method to get column editors automatically generated by the grid control.
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 submits the edit form 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 standard .NET value equality comparison to identify data items.
5. (Optional) Handle the CustomizeEditModel event to initialize an edit model for new data rows.

In this demo, the checkbox above the Grid allows you to switch to the PopupEditForm mode. The edit form contains two cascading Comboboxes: Country and City. The City combo box is dynamically populated with items based on the value selected within the Country combo box.

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