Radzen Blazor主从RadzenDataGrid如何批量编辑订单明细

核心实现步骤 #

1. 给明细表格添加选中列 #

在明细RadzenDataGrid的<Columns>开头添加复选框列，用来绑定选中的明细项：

<RadzenDataGridColumn TItem="OrderDetail" Filterable="false" Sortable="false" Width="50px">
    <Template Context="detail">
        <RadzenCheckBox @bind-Value="_selectedDetails" Value="@detail" />
    </Template>
</RadzenDataGridColumn>

2. 添加批量操作按钮 #

在明细表格上方添加批量编辑和批量保存按钮，控制按钮禁用状态：

<div style="margin-bottom:10px; display:flex; gap:10px;">
    <RadzenButton Icon="edit_note" Text="批量编辑选中明细" Click="@BatchEditDetails" Disabled="@(!_selectedDetails.Any())" />
    <RadzenButton Icon="save" Text="批量保存" Click="@BatchSaveDetails" Disabled="@(!_gridDetail.EditContext.EditItems.Any())" Loading="@_isSaving" />
</div>

3. 完善代码逻辑 #

在@code块中补充选中集合和批量操作方法：

• 初始化选中明细集合：

IList<OrderDetail> _selectedDetails = new List<OrderDetail>();
bool _isSaving = false;

• 实现批量编辑方法，让选中的明细进入编辑模式：

async Task BatchEditDetails()
{
    foreach (var detail in _selectedDetails)
    {
        await _gridDetail.EditRow(detail);
    }
}

• 实现批量保存方法，批量提交更新并刷新表格：

async Task BatchSaveDetails()
{
    _isSaving = true;
    try
    {
        var editedItems = _gridDetail.EditContext.EditItems.Cast<OrderDetail>().ToList();
        foreach (var item in editedItems)
        {
            if (item != null)
            {
                await EditOrderDetailUseCase.ExecuteAsync(item);
                await _gridDetail.UpdateRow(item);
            }
        }
        _selectedDetails.Clear();
        await _gridDetail.Reload();
    }
    finally
    {
        _isSaving = false;
    }
}

4. 完整修改后的明细表格代码片段 #

<RadzenTabsItem Text="Order Details">
    <div style="margin-bottom:10px; display:flex; gap:10px;">
        <RadzenButton Icon="add_circle_outline" Text="Add Order Detail" Click="@InsertDetailRow" Disabled=@(_detailToInsert != null) />
        <RadzenButton Icon="edit_note" Text="批量编辑选中明细" Click="@BatchEditDetails" Disabled="@(!_selectedDetails.Any())" />
        <RadzenButton Icon="save" Text="批量保存" Click="@BatchSaveDetails" Disabled="@(!_gridDetail.EditContext.EditItems.Any())" Loading="@_isSaving" />
    </div>
    
    <RadzenDataGrid @ref="_gridDetail" AllowFiltering="true" AllowPaging="true" PageSize="5" AllowSorting="true" Data="@(SelectedOrders.FirstOrDefault()?.OrderDetails)" 
                    TItem="OrderDetail" EditMode="DataGridEditMode.Multiple" RowUpdate="@OnUpdateRowDetail" RowCreate="@OnCreateRowDetail" >
        <Columns>
            <RadzenDataGridColumn TItem="OrderDetail" Filterable="false" Sortable="false" Width="50px">
                <Template Context="detail">
                    <RadzenCheckBox @bind-Value="_selectedDetails" Value="@detail" />
                </Template>
            </RadzenDataGridColumn>
            <!-- 原有列保持不变 -->
            <RadzenDataGridColumn TItem="OrderDetail" Property="Id" Title="Product Number" />
            <RadzenDataGridColumn TItem="OrderDetail" Property="ProductCode" Title="Code">
                <EditTemplate Context="orderDetail">
                    <RadzenTextBox @bind-Value="orderDetail.ProductCode" Style="width:100%; display: block" Name="ProductCode" />
                    <RadzenRequiredValidator Text="Product Code is required" Component="ProductCode" Popup="true" Style="position:absolute"/>
                </EditTemplate>
            </RadzenDataGridColumn>
            <!-- 其他列省略 -->
        </Columns>
    </RadzenDataGrid>
</RadzenTabsItem>

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