如何在Telerik Blazor分层网格中同时筛选父子网格？

原生GridSearchBox仅能筛选父网格字段，无法匹配子网格数据。以下是无需修改实体类的最优实现方案，通过自定义搜索逻辑实现父子网格的联合筛选：

实现代码 #

网格组件部分 #

<TelerikGrid Data="@FilteredSalesTeamMembers"
             Pageable="true"
             Sortable="true">
    <GridToolBar>
        <!-- 自定义搜索框替代原生组件，获得筛选控制权 -->
        <TelerikTextBox @bind-Value="@SearchTerm"
                        Placeholder="搜索父网格或子网格内容..."
                        DebounceDelay="300"
                        Width="300px">
            <Template>
                <span class="k-icon k-i-search"></span>
                @context
            </Template>
        </TelerikTextBox>
    </GridToolBar>

    <GridColumns>
        <GridColumn Field="@nameof(MainModel.Id)" Title="ID" />
        <GridColumn Field="@nameof(MainModel.Name)" Title="姓名" />
    </GridColumns>

    <DetailTemplate>
        @{
            var employee = context as MainModel;
            // 子网格同步应用搜索筛选，只显示匹配的订单
            var filteredOrders = employee.Orders.Where(o => string.IsNullOrEmpty(SearchTerm) 
                || o.OrderDetail.Contains(SearchTerm, StringComparison.OrdinalIgnoreCase)).ToList();
        }
        <TelerikGrid Data="@filteredOrders" Pageable="true" PageSize="5">
            <GridColumns>
                <GridColumn Field="@nameof(DetailsModel.OrderId)" Title="订单ID" />
                <GridColumn Field="@nameof(DetailsModel.OrderDetail)" Title="订单详情" />
            </GridColumns>
        </TelerikGrid>
    </DetailTemplate>
</TelerikGrid>

逻辑代码部分 #

@code {
    private List<MainModel> SalesTeamMembers { get; set; }
    private List<MainModel> FilteredSalesTeamMembers { get; set; }
    private string SearchTerm { get; set; } = string.Empty;

    protected override void OnInitialized()
    {
        SalesTeamMembers = GenerateData();
        FilteredSalesTeamMembers = SalesTeamMembers.ToList();
    }

    // 监听搜索词变化，自动应用筛选
    protected override void OnParametersSet()
    {
        ApplyFilter();
    }

    private void ApplyFilter()
    {
        if (string.IsNullOrEmpty(SearchTerm))
        {
            FilteredSalesTeamMembers = SalesTeamMembers.ToList();
            return;
        }

        var lowerSearchTerm = SearchTerm.ToLowerInvariant();
        FilteredSalesTeamMembers = SalesTeamMembers.Where(member => 
            // 匹配父网格的ID或Name字段
            member.Id.ToString().Contains(lowerSearchTerm) ||
            member.Name.ToLowerInvariant().Contains(lowerSearchTerm) ||
            // 匹配子网格中任意一条订单的详情
            member.Orders.Any(order => order.OrderDetail.ToLowerInvariant().Contains(lowerSearchTerm))
        ).ToList();
    }

    // 模拟生成测试数据
    private List<MainModel> GenerateData()
    {
        Random random = new Random();
        List<MainModel> data = new List<MainModel>();
        for (int i = 0; i < 5; i++)
        {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            mdl.Orders = Enumerable.Range(1, 15)
                                   .Select(x => new DetailsModel
                                       {
                                           OrderId = x,
                                           OrderDetail = $"Random detail {x ^ i}"
                                       }).ToList();
            data.Add(mdl);
        }
        return data;
    }

    // 父网格数据模型
    public class MainModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<DetailsModel> Orders { get; set; } 
    }

    // 子网格数据模型
    public class DetailsModel
    {
        public int OrderId { get; set; }
        public string OrderDetail { get; set; }
    }
}

方案优势 #

1. 无需修改实体类：避免新增冗余字段，保持数据模型纯净性
2. 筛选逻辑完全可控：可自由扩展匹配规则（比如添加更多父/子字段的匹配）
3. 子网格同步筛选：父行显示时，子网格仅展示匹配订单，提升用户体验
4. 性能优化：通过DebounceDelay减少频繁输入时的筛选次数，降低性能消耗

对比临时方案的不足 #

你之前采用的合并子网格数据到父实体的方案存在以下问题：

• 新增冗余字段导致数据模型不纯粹
• 大量子数据合并字符串会占用额外内存
• 隐藏列的实现方式不够优雅，可能引发布局兼容性问题

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