DevExpress-Examples / blazor-dxgrid-detect-row-editing-cancellation

Show a confirmation dialog when users start editing another row in the Grid without saving the changes they made.

Grid for Blazor - How to display a confirmation dialog when users start editing another row without saving changes

This example illustrates how to show a confirmation dialog when users start editing another row in the DevExpress Blazor Grid without saving the changes they made. This dialog allows users to save or discard the pending changes.

Overview

The Grid discards all unsaved changes if a user starts editing a grid row while another row is being edited. In such a scenario, you can show a pop-up window and prompt users to save or discard their changes. Follow the steps below to implement this behavior:

1. Configure the Grid component to allow users to edit grid data. Refer to the following help topic for more information: Edit Data and Validate Input.

2. Add the Popup component that includes the custom Save and Cancel buttons. In response to a click on the Cancel button, set the DxPopup's Visible property to false to close the pop-up window. When a user clicks Save, call the DxGrid's SaveChangesAsync method to save the changes and close the pop-up window.

3. Use the command column's CellDisplayTemplate property to replace the built-in Edit button with a custom button. When a user clicks the custom button, check whether the component data was modified. Show the pop-up window if the Grid component has unsaved changes; otherwise, start editing the clicked row.

4. Once the pop-up window closes, start editing the clicked row.

Files to Review

• Index.razor

Documentation

• Bind the Grid to Data
• Edit Grid Data and Validate Input

More Examples

• Grid for Blazor - How to post changes to an in-memory data source
• Grid for Blazor - Create a custom record deletion confirmation dialog
• Grid for Blazor – How to activate EditRow mode and define data editors for row cells