如何实现SfGrid中ComboBox按选中类别过滤选项？

要实现根据当前行选中的Category过滤ItemCode列ComboBox的选项，可通过动态筛选数据源和类别变更联动两步完成：

1. 实现动态筛选方法 #

在组件代码中添加按类别筛选商品列表的方法，用于返回当前类别对应的有效商品数据：

// 假设dtoItemMaster实体包含Category属性，与行数据的Category匹配
private IEnumerable<dtoItemMaster> GetFilteredItems(string currentCategory)
{
    if (string.IsNullOrWhiteSpace(currentCategory))
        return ItemMasterList;
    // 按当前行的Category过滤商品列表
    return ItemMasterList.Where(item => item.Category.Equals(currentCategory, StringComparison.OrdinalIgnoreCase));
}

2. 修改ItemCode列的ComboBox绑定 #

将ItemCode列EditTemplate中的ComboBox数据源，从直接绑定ItemMasterList改为调用上述筛选方法，传入当前行的Category：

<GridColumn Field=@nameof(dtoItemMasterClassWise.ItemCode) HeaderText="Item Code" ValidationRules="@(new ValidationRules{ Required=true})" Width="90">
    <EditTemplate>
        @{
            var rowData = context as dtoItemMasterClassWise;
            <SfComboBox ID="ItemCode" AllowCustom="true" @bind-Value="@rowData.ItemCode" 
                        TItem="dtoItemMaster" TValue="string" 
                        DataSource="@GetFilteredItems(rowData.Category)" PopupWidth="400px">
                <ComboBoxFieldSettings Text="@nameof(dtoItemMaster.ItemCode)" Value="@nameof(dtoItemMaster.ItemCode)" />
                <ComboBoxTemplates TItem="dtoItemMaster">
                    <HeaderTemplate>
                        <div class="row">
                            <div class="col-lg-3" style="width:220px">ItemCode</div>
                            <div class="col-lg-3" style="width:220px">ItemName</div>
                        </div>
                    </HeaderTemplate>
                    <ItemTemplate Context="con">
                        <div class="row">
                            <div class="col-lg-3" style="width:220px">@con.ItemCode</div>
                            <div class="col-lg-3" style="width:220px">@con.ItemName</div>
                        </div>
                    </ItemTemplate>
                </ComboBoxTemplates>
                <ComboBoxEvents TValue="string" TItem="dtoItemMaster" ValueChange="@DropDownOnChange"></ComboBoxEvents>
            </SfComboBox>
        }
    </EditTemplate>
</GridColumn>

3. 处理类别变更后的联动（可选） #

若要在Category修改后自动清空不符合新类别的ItemCode，给Category列添加自定义EditTemplate并监听值变更：

修改Category列的EditTemplate #

<GridColumn Field=@nameof(dtoItemMasterClassWise.Category) HeaderText="Category" ValidationRules="@(new ValidationRules{ Required=true})" Width="100">
    <EditTemplate>
        @{
            var rowData = context as dtoItemMasterClassWise;
            <SfDropDownList @bind-Value="@rowData.Category" TItem="string" TValue="string" 
                            DataSource="@YourCategoryDataSource"> <!-- 替换为你的类别数据源 -->
                <DropDownListEvents ValueChange="@(args => OnCategoryUpdated(args, rowData))"></DropDownListEvents>
            </SfDropDownList>
        }
    </EditTemplate>
</GridColumn>

添加类别变更处理方法 #

private void OnCategoryUpdated(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, string> args, dtoItemMasterClassWise rowData)
{
    // 检查当前ItemCode是否属于新类别，不属于则清空
    var isValidItem = GetFilteredItems(args.Value).Any(item => item.ItemCode == rowData.ItemCode);
    if (!isValidItem)
    {
        rowData.ItemCode = string.Empty;
        rowData.ItemName = string.Empty; // 同步清空ItemName
    }
}

4. 同步更新ItemName列（可选） #

在DropDownOnChange方法中同步更新ItemName，确保与选中的ItemCode匹配：

private void DropDownOnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, dtoItemMaster> args)
{
    var rowData = args.Item as dtoItemMasterClassWise;
    if (rowData != null)
    {
        var selectedItem = ItemMasterList.FirstOrDefault(item => item.ItemCode == args.Value);
        if (selectedItem != null)
        {
            rowData.ItemName = selectedItem.ItemName;
        }
    }
}

内容的提问来源于stack exchange，提问作者SHUHAIRA K.A