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.

   <DxGrid @ref="Grid" Data="Forecasts"
           EditMode="GridEditMode.EditRow"
           EditModelSaving="Grid_EditModelSaving"
           CssClass="mw-1100">
       <Columns>...</Columns>
   </DxGrid>
   
    @code {
        void Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
            e.CopyChangesToDataItem();
        }
    }

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.

   <DxPopup @bind-Visible="IsPopupVisible" HeaderText="Modify a Record" ShowCloseButton="true" Closed="Popup_Closed">
       <BodyContentTemplate>
           <p>Your data item has been modified. Do you want to save your changes?</p>
           <div class="confirmation-dialog-content">
               <DxButton RenderStyle="ButtonRenderStyle.Primary" Text="Yes" Click="ButtonSave_Click" />
               <DxButton RenderStyle="ButtonRenderStyle.Secondary" Text="No" Click="ButtonCancel_Click" />
           </div>
       </BodyContentTemplate>
   </DxPopup>
   
   @code {
       async Task ButtonSave_Click() {
           await Grid.SaveChangesAsync();
           IsPopupVisible = false;
       }
       async Task ButtonCancel_Click() {
           IsPopupVisible = false;
       }
   }

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.

   <DxGrid ...>
       <Columns>
           <DxGridCommandColumn NewButtonVisible="false" DeleteButtonVisible="false">
               <CellDisplayTemplate>
                   <DxButton Click="() => GridEditButton_Click(context)" Text="Edit" RenderStyle="ButtonRenderStyle.Link" />
               </CellDisplayTemplate>
           </DxGridCommandColumn>
           <DxGridDataColumn Caption="Date" FieldName="Date" />
           <DxGridDataColumn Caption="Temperature (C)" FieldName="TemperatureC" />
       </Columns>
   </DxGrid>
   
   @code {
       async Task GridEditButton_Click(GridCommandColumnCellDisplayTemplateContext context) {
           if (context.Grid.IsEditing() && context.Grid.GetEditContext().IsModified()) {
               SavedDataItem = context.DataItem;
               IsPopupVisible = true;
           } else
               await context.Grid.StartEditDataItemAsync(context.DataItem);
       }
   }

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

   async Task Popup_Closed() {
       if(SavedDataItem != null) {
           await Grid.StartEditDataItemAsync(SavedDataItem);
           SavedDataItem = null;
       }
   }

Files to Review

• Index.razor

Documentation

• Bind the Grid to Data
• Edit Grid Data and Validate Input
• Confirmation Dialog Based on DevExpress Blazor Message Box

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

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)