如何在Blazor中使用Syncfusion自定义SfGrid默认对话框

一、解决IsModal属性全局生效问题 #

默认情况下SfGrid的编辑对话框为实例级配置，若要让所有Grid的默认对话框都启用模态，可通过以下方式统一设置：

• 批量配置每个Grid的EditSettings：在所有Grid实例的EditSettings中显式指定DialogOptions，确保模态属性全局生效：

<SfGrid DataSource="@Orders" AllowPaging="true">
    <GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true">
        <DialogOptions IsModal="true" Width="500px" />
    </GridEditSettings>
    <!-- 列配置 -->
</SfGrid>

• 全局注入配置：在_Host.cshtml中添加Syncfusion全局设置，统一对话框默认属性：

<script>
    window.syncfusion = {
        grid: {
            editDialog: {
                isModal: true
            }
        }
    };
</script>

二、完全自定义编辑对话框 #

若要彻底替换默认对话框，可通过Grid的EditTemplate结合独立SfDialog组件实现：

1. Razor页面代码 #

@page "/"
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Dialogs

<SfGrid @ref="GridRef" DataSource="@Orders" AllowPaging="true">
    <GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" Mode="EditMode.Dialog">
        <EditTemplate>
            @{
                var order = context as Order;
            }
            <div class="edit-form">
                <div class="form-item">
                    <label>订单ID</label>
                    <input type="text" @bind="@order.OrderID" class="form-input" disabled />
                </div>
                <div class="form-item">
                    <label>客户名称</label>
                    <input type="text" @bind="@order.CustomerName" class="form-input" />
                </div>
                <div class="form-item">
                    <label>订单日期</label>
                    <input type="date" @bind="@order.OrderDate" class="form-input" />
                </div>
            </div>
        </EditTemplate>
    </GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="订单ID" IsPrimaryKey="true"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerName) HeaderText="客户名称"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="订单日期" Format="d"></GridColumn>
        <GridColumn HeaderText="操作" Width="120">
            <GridCommandColumns>
                <GridCommandColumn Type="CommandType.Edit" ButtonOption="@new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" }"></GridCommandColumn>
                <GridCommandColumn Type="CommandType.Delete" ButtonOption="@new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" }"></GridCommandColumn>
            </GridCommandColumns>
        </GridColumn>
    </GridColumns>
</SfGrid>

<!-- 独立自定义对话框（可选，完全替代默认对话框） -->
<SfDialog @ref="CustomDialogRef" IsModal="true" Width="550px" ShowCloseIcon="true">
    <DialogTemplates>
        <Header>自定义订单编辑</Header>
        <Content>
            @if(CurrentEditOrder != null)
            {
                <div class="edit-form">
                    <div class="form-item">
                        <label>订单ID</label>
                        <input type="text" @bind="@CurrentEditOrder.OrderID" class="form-input" disabled />
                    </div>
                    <div class="form-item">
                        <label>客户名称</label>
                        <input type="text" @bind="@CurrentEditOrder.CustomerName" class="form-input" />
                    </div>
                    <div class="form-item">
                        <label>订单日期</label>
                        <input type="date" @bind="@CurrentEditOrder.OrderDate" class="form-input" />
                    </div>
                </div>
            }
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="保存" IsPrimary="true" OnClick="@SaveEdit" />
        <DialogButton Content="取消" OnClick="@CancelEdit" />
    </DialogButtons>
</SfDialog>

@code {
    private SfGrid<Order> GridRef;
    private SfDialog CustomDialogRef;
    private Order CurrentEditOrder;
    private List<Order> Orders;

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 10).Select(x => new Order()
        {
            OrderID = x,
            CustomerName = $"客户{x}",
            OrderDate = DateTime.Now.AddDays(-x)
        }).ToList();
    }

    // 触发自定义对话框（需替换Grid默认编辑事件）
    public async Task EditRecord(ClickEventArgs args)
    {
        CurrentEditOrder = args.Data as Order;
        await CustomDialogRef.ShowAsync();
    }

    private async Task SaveEdit()
    {
        await GridRef.EndEditAsync();
        await CustomDialogRef.HideAsync();
    }

    private async Task CancelEdit()
    {
        await GridRef.CancelEditAsync();
        await CustomDialogRef.HideAsync();
    }

    public class Order
    {
        public int OrderID { get; set; }
        public string CustomerName { get; set; }
        public DateTime OrderDate { get; set; }
    }
}

2. 关键说明 #

• 使用EditTemplate时，Grid会自动传入编辑上下文，可直接绑定数据字段
• 若选择独立对话框模式，需禁用Grid默认的Dialog编辑模式，通过自定义按钮/双击事件触发对话框
• 确保自定义对话框的IsModal属性设为true，实现全站级模态遮罩效果

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