Blazor（c#）DXDatagrid（devexpress）：用图标替换默认命令按钮时，主详细信息编辑器出现问题

我使用Blazor和DevXPress DxDataGrid组件创建了一个C#项目，以创建主详细视图。使用默认命令按钮（新建、编辑），一切正常。当我用图标替换主命令默认按钮时，编辑功能没有问题：

替换细节默认控件时，用于添加或替换行的细节编辑器不起作用：

当我保留默认命令按钮时，仅针对细节、主控形状（带图标）和细节（带默认按钮），所有主控形状和细节编辑器都可以正常工作：

要复制此问题，请下载并编译devexpress项目，您可以在以下网址找到： 该示例显示了如何替换单个网格中的默认按钮。在我的测试项目中，我添加了一个细节，如下代码所示（只需替换.razor文件中的所有代码）：

@page/“
@使用带有图标的命令按钮。数据
@注入天气预报服务预报服务
@如果（预测==null）{
加载。。。
}
否则{
OnRowUpdate（更新DataItem、newValues））
行插入=@（（新值）=>OnRowInserting（新值））>
x、 TemperatureC==dataItem.TemperatureC）ShowFilterRow=false CssClass=“MainGrid”@ref=“MyGridDetail”
RowUpdate=@（（UpdateDataItem，newValues）=>OnRowUpdate（UpdateDataItem，newValues））
行插入=@（（新值）=>OnRowInserting（新值））>
}
@功能{
天气预报[]预报；
字符串[]摘要；
DevExpress.Blazor.DxDataGrid MyGrid；
DevExpress.Blazor.DxDataGrid MyGridDetail；
受保护的重写异步任务OnInitializedAsync（）{
Forecast=等待ForecastService.getForecastSync（）；
summaries=等待ForecastService.GetSummariesAsync（）；
}
异步void onrowUpdate（WeatherForecast数据项、字典newValue）{
Forecast=等待ForecastService.Update（数据项，newValue）；
}
异步void OnRowInserting（字典newValue）{
预测=等待预测服务。插入（新值）；
}
异步作废删除（WeatherForecast项目）{
如果（项！=null）{
预测=等待预报服务。删除（项目）；
}
}
}

更新正如devexpress的Paul V所建议的，我们必须创建一个实现新DXDatagrid组件实例的新razor组件，因为它不适合在同一razor组件上引用该组件2次或多次。因此，要解决此问题，请创建另一个组件（即DetaGrid），并在DetailRowTemplate中引用它，然后发送一个参数、主记录和详细信息源：

 <DetailRowTemplate Context="dataItem">
    <DetailGrid MasterRecord="@dataItem" ForecastService="@ForecastService" Forecasts="@forecasts" ></DetailGrid>
</DetailRowTemplate>

详细示例：

    <h3>DetailGrid2</h3>
            @using CommandButtonsWithIcons.Data


            <DxDataGrid Data=@Forecasts.Where(x=>x.TemperatureC==MasterRecord.TemperatureC) ShowFilterRow=false CssClass="MainGrid" @ref="MyGridDetail"
                        RowUpdatingAsync=@(OnRowUpdating)
                        RowInsertingAsync=@(OnRowInserting)>
                <DxDataGridCommandColumn>
                    <HeaderCellTemplate>
                            <a class="oi oi-plus" @onclick="@(() => MyGridDetail.StartRowEdit(null))" href="javascript:void(0);"></a>
                        </HeaderCellTemplate>

                    <CellTemplate>
                        <a class="oi oi-pencil" @onclick="@(() => MyGridDetail.StartRowEdit(context))" href="javascript:void(0);"></a>
                    </CellTemplate>
                </DxDataGridCommandColumn>
                <DxDataGridColumn Field=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)"></DxDataGridColumn>
                <DxDataGridColumn Field=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)"></DxDataGridColumn>
                <DxDataGridDateEditColumn Field=@nameof(WeatherForecast.Date) DisplayFormatString="dd/MM/yyyy"
                                          EditFormatString="dd/MM/yyyy"></DxDataGridDateEditColumn>
            </DxDataGrid>

            @code {
                [Parameter]
                public WeatherForecast[] Forecasts { get; set; }

                [Parameter]
                public WeatherForecast MasterRecord{ get; set; }

                [Parameter]
                public WeatherForecastService ForecastService { get; set; }



                DevExpress.Blazor.DxDataGrid<WeatherForecast> MyGridDetail = null;

                async Task OnRowUpdating(WeatherForecast dataItem, IDictionary<string, object> newValue)
                {
                    Forecasts = await ForecastService.Update(dataItem, newValue);
                }
                async Task OnRowInserting(IDictionary<string, object> newValue)
                {
                    //forecasts = await ForecastService.Insert(newValue);
                }

            }

DetailGrid2
@使用带有图标的命令按钮。数据
x、 TemperatureC==MasterRecord.TemperatureC）ShowFilterRow=false CssClass=“MainGrid”@ref=“MyGridDetail”
RowUpdatengAsync=@（OnRowUpdatening）
RowInsertingAsync=@（OnRowInserting）>
@代码{
[参数]
公共天气预报[]预测{get；set；}
[参数]
公共天气预报主记录{get；set；}
[参数]
公共天气预报服务预报服务{get；set；}
DevExpress.Blazor.DxDataGrid MyGridDetail=null；
异步任务OnRowUpdate（WeatherForecast数据项，IDictionary newValue）
{
Forecast=等待ForecastService.Update（数据项，newValue）；
}
异步任务在行插入（IDictionary newValue）
{
//预测=等待预测服务。插入（新值）；
}
}

我不建议对多个实例使用一个ref变量。它可能会引起这样的碰撞。将详图网格隔离在单独的构件中以解决问题

    <h3>DetailGrid2</h3>
            @using CommandButtonsWithIcons.Data


            <DxDataGrid Data=@Forecasts.Where(x=>x.TemperatureC==MasterRecord.TemperatureC) ShowFilterRow=false CssClass="MainGrid" @ref="MyGridDetail"
                        RowUpdatingAsync=@(OnRowUpdating)
                        RowInsertingAsync=@(OnRowInserting)>
                <DxDataGridCommandColumn>
                    <HeaderCellTemplate>
                            <a class="oi oi-plus" @onclick="@(() => MyGridDetail.StartRowEdit(null))" href="javascript:void(0);"></a>
                        </HeaderCellTemplate>

                    <CellTemplate>
                        <a class="oi oi-pencil" @onclick="@(() => MyGridDetail.StartRowEdit(context))" href="javascript:void(0);"></a>
                    </CellTemplate>
                </DxDataGridCommandColumn>
                <DxDataGridColumn Field=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)"></DxDataGridColumn>
                <DxDataGridColumn Field=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)"></DxDataGridColumn>
                <DxDataGridDateEditColumn Field=@nameof(WeatherForecast.Date) DisplayFormatString="dd/MM/yyyy"
                                          EditFormatString="dd/MM/yyyy"></DxDataGridDateEditColumn>
            </DxDataGrid>

            @code {
                [Parameter]
                public WeatherForecast[] Forecasts { get; set; }

                [Parameter]
                public WeatherForecast MasterRecord{ get; set; }

                [Parameter]
                public WeatherForecastService ForecastService { get; set; }



                DevExpress.Blazor.DxDataGrid<WeatherForecast> MyGridDetail = null;

                async Task OnRowUpdating(WeatherForecast dataItem, IDictionary<string, object> newValue)
                {
                    Forecasts = await ForecastService.Update(dataItem, newValue);
                }
                async Task OnRowInserting(IDictionary<string, object> newValue)
                {
                    //forecasts = await ForecastService.Insert(newValue);
                }

            }