如何取消Syncfusion Blazor Grid关闭对话框后工具栏按钮的选中状态

问题原因 #

你在工具栏点击事件中设置了Args.Cancel = true阻止了Grid的默认编辑/新增逻辑，导致Syncfusion工具栏按钮的激活状态没有自动复位，不需要传递按钮引用，通过框架内置API即可解决。

解决步骤 #

步骤1：修改可复用对话框组件，添加关闭回调 #

在ReusableDialog的代码块中新增关闭事件参数：

[Parameter]
public EventCallback OnDialogClosed { get; set; }

修改SaveClick方法（注意将返回值从void改为Task），关闭对话框后触发回调：

private async Task SaveClick()
{
    if (editContext.Validate())
    {
        Logger.LogInformation("Validation Succeeded");
        if (Mode == "Create")
        {
            this.template.UserName = "Bryan Schmiedeler";
            WireDeskService.InsertTemplate(template);
            this.DataChanged();
            this.IsOpen = false;
            Logger.LogInformation("Create Validation Passed");

        }
        else if (Mode == "Update")
        {
            this.template.UserName = "Bryan Schmiedeler";
            WireDeskService.UpdateTemplate(template.TemplateId, template);
            this.DataChanged();
            this.IsOpen = false;
            this.IsClosed = "OK Clicked";
            Logger.LogInformation("Update Validation Passed");
        }
        // 触发关闭回调
        await OnDialogClosed.InvokeAsync();
    }
    else
    {
        IsOpen = true;
        Logger.LogInformation("Validation Failed");
    }
}

修改CancelClick方法，关闭对话框后也触发回调：

public async Task CancelClick()
{
    IsOpen = false;
    await OnDialogClosed.InvokeAsync();
    this.StateHasChanged();
}

步骤2：修改主页面，绑定回调清除工具栏选中状态 #

修改主页面中ReusableDialog的标签，绑定关闭回调：

<ReusableDialog @ref="dialog" DataChanged="@DataChanged" OnDialogClosed="@ClearToolbarSelection"></ReusableDialog>

在主页面的代码块中新增ClearToolbarSelection方法：

private async Task ClearToolbarSelection()
{
    // 获取Grid内置工具栏实例
    var toolbar = await Grid.GetToolbarAsync();
    // 清除工具栏按钮的选中状态
    await toolbar.ClearSelectionAsync();
}

修改完成后，不管是点击保存还是取消关闭对话框，都会自动清除工具栏按钮的选中状态。

内容的提问来源于stack exchange，提问作者Bryan Schmiedeler