Index.razor

@page "/"

@using ShowConfirmationDialog.Data
@inject WeatherForecastService ForecastService

<DxGrid @ref="Grid" Data="Forecasts"
        EditMode="GridEditMode.EditRow"
        EditModelSaving="Grid_EditModelSaving"
        CssClass="mw-1100">
    <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>

<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 {
    List<WeatherForecast> Forecasts { get; set; }
    IGrid Grid { get; set; }

    object SavedDataItem { get; set; }
    bool IsPopupVisible { get; set; }

    protected override async Task OnInitializedAsync() {
        Forecasts = await ForecastService.GetForecastAsync(DateTime.Now.AddDays(-2));
    }

    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);
    }

    void Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
        e.CopyChangesToDataItem();
    }

    async Task ButtonSave_Click() {
        await Grid.SaveChangesAsync();
        IsPopupVisible = false;
    }

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