如何为Telerik Blazor Grid筛选框添加.trim()去除空格？

有两种常用方案可以实现筛选行输入值的去空格处理，根据需求选择即可：

方案一：全局统一处理所有列（推荐） #

通过拦截Grid的OnFilterChange事件，在筛选条件应用前对所有字符串类型的筛选值进行trim()处理，无需修改单个列的模板，适合全局统一规则的场景。

实现步骤： #

1. 给Grid添加OnFilterChange事件绑定，并声明Grid的引用（用于更灵活的操作）。
2. 在事件处理方法中遍历筛选描述符，对字符串值执行去空格操作，空值则移除对应筛选条件。

完整代码示例： #

@page "/grid-filter-trim"
@using Telerik.Blazor.Components.Grid
@using Telerik.DataSource

<TelerikGrid @ref="GridInstance"
             Data="@GridData"
             Pageable="true"
             Sortable="true"
             FilterMode="@GridFilterMode.FilterRow"
             OnFilterChange="@OnGridFilterChange">
    <GridColumns>
        <GridColumn Field="Name" Title="Product Name" />
        <GridColumn Field="Price" DisplayFormat="{0:C2}" />
        <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:D}" />
        <GridColumn Field="@nameof(Product.Discontinued)" />
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Product> GridInstance { get; set; }
    private List<Product> GridData { get; set; }

    protected override void OnInitialized()
    {
        // 模拟业务数据
        GridData = new List<Product>
        {
            new Product { Name = "  Laptop  ", Price = 999.99m, Released = new DateTime(2023, 1, 1), Discontinued = false },
            new Product { Name = "Smartphone", Price = 699.99m, Released = new DateTime(2023, 3, 1), Discontinued = false },
            new Product { Name = "  Tablet  ", Price = 299.99m, Released = new DateTime(2022, 10, 1), Discontinued = true }
        };
    }

    private void OnGridFilterChange(GridFilterEventArgs args)
    {
        // 处理多列复合筛选
        if (args.FilterDescriptor is CompositeFilterDescriptor compositeFilter)
        {
            var filterList = compositeFilter.FilterDescriptors.ToList();
            foreach (var descriptor in filterList.OfType<FilterDescriptor>())
            {
                if (descriptor.Value is string inputValue)
                {
                    var trimmedValue = inputValue.Trim();
                    if (string.IsNullOrEmpty(trimmedValue))
                    {
                        compositeFilter.FilterDescriptors.Remove(descriptor);
                    }
                    else
                    {
                        descriptor.Value = trimmedValue;
                    }
                }
            }
        }
        // 处理单列筛选
        else if (args.FilterDescriptor is FilterDescriptor singleFilter)
        {
            if (singleFilter.Value is string inputValue)
            {
                var trimmedValue = inputValue.Trim();
                args.FilterDescriptor = string.IsNullOrEmpty(trimmedValue) ? null : singleFilter;
                if (args.FilterDescriptor != null)
                {
                    singleFilter.Value = trimmedValue;
                }
            }
        }
    }

    // 业务模型
    public class Product
    {
        public string Name { get; set; }
        public decimal Price { get; set; }
        public DateTime Released { get; set; }
        public bool Discontinued { get; set; }
    }
}

方案二：针对特定列自定义筛选模板 #

如果只需要对某几个列做去空格处理，可以给目标列添加自定义筛选模板，手动控制输入值的处理逻辑。

实现步骤： #

1. 定义对应列的筛选变量，用于绑定输入框值。
2. 在列的FilterTemplate中使用Telerik输入组件，通过@bind-Value:after自动处理去空格，结合OnChange触发筛选。
3. 编写筛选应用方法，将trim后的值作为筛选条件传入Grid。

示例代码（以Name列为例）： #

@page "/grid-filter-trim-specific"
@using Telerik.Blazor.Components.Grid
@using Telerik.DataSource

<TelerikGrid @ref="GridInstance"
             Data="@GridData"
             Pageable="true"
             Sortable="true"
             FilterMode="@GridFilterMode.FilterRow">
    <GridColumns>
        <GridColumn Field="Name" Title="Product Name">
            <FilterTemplate>
                <TelerikTextBox @bind-Value="@NameFilter" 
                                DebounceDelay="300" 
                                @bind-Value:after="@(() => NameFilter = NameFilter?.Trim())"
                                OnChange="@ApplyNameFilter" />
            </FilterTemplate>
        </GridColumn>
        <GridColumn Field="Price" DisplayFormat="{0:C2}" />
        <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:D}" />
        <GridColumn Field="@nameof(Product.Discontinued)" />
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Product> GridInstance { get; set; }
    private List<Product> GridData { get; set; }
    private string NameFilter { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Product>
        {
            new Product { Name = "  Laptop  ", Price = 999.99m, Released = new DateTime(2023, 1, 1), Discontinued = false },
            new Product { Name = "Smartphone", Price = 699.99m, Released = new DateTime(2023, 3, 1), Discontinued = false },
            new Product { Name = "  Tablet  ", Price = 299.99m, Released = new DateTime(2022, 10, 1), Discontinued = true }
        };
    }

    private void ApplyNameFilter()
    {
        var trimmedValue = NameFilter?.Trim() ?? string.Empty;
        var currentFilters = GridInstance.FilterDescriptors.ToList();

        // 移除原有Name列的筛选条件
        var existingFilter = currentFilters.FirstOrDefault(fd => 
            fd is FilterDescriptor fdCast && fdCast.Member == nameof(Product.Name));
        if (existingFilter != null)
        {
            currentFilters.Remove(existingFilter);
        }

        // 添加trim后的筛选条件（非空时）
        if (!string.IsNullOrEmpty(trimmedValue))
        {
            currentFilters.Add(new FilterDescriptor(nameof(Product.Name), FilterOperator.Contains, trimmedValue));
        }

        // 更新Grid筛选
        GridInstance.FilterDescriptors = new CompositeFilterDescriptor { FilterDescriptors = currentFilters };
    }

    public class Product
    {
        public string Name { get; set; }
        public decimal Price { get; set; }
        public DateTime Released { get; set; }
        public bool Discontinued { get; set; }
    }
}

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