Telerik Blazor 网格修剪滤镜

Question

你们知道如何将 .trim() 添加到 Telerik 网格过滤器字段中输入的任何值吗？我不想在字段中有任何空白

<TelerikGrid Data="@GridData"
         Pageable="true"
         Sortable="true"
         FilterMode="@GridFilterMode.FilterRow">
<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>

Answer 1

您可以尝试创建自定义过滤器组件以在网格中使用。例如以下示例来修剪输入值：

自定义过滤器组件.razor

@using Telerik.Blazor.Components

<InputText @bind-Value="@FilterValue" @oninput="OnInputChange" />

@code {
    [Parameter]
    public string FilterValue { get; set; }

    [Parameter]
    public EventCallback<string> OnFilterChanged { get; set; }

    private async Task OnInputChange(ChangeEventArgs e)
    {
        var value = e.Value?.ToString().Trim();
        await OnFilterChanged.InvokeAsync(value);
    }
}

Home.剃须刀

@page "/"

@using Telerik.Blazor.Components
@using Telerik.DataSource

<TelerikGrid Data="@GridData" Height="400px" Pageable="true" FilterMode="Telerik.Blazor.GridFilterMode.FilterRow" >
    <GridColumns>
        <GridColumn Field="Name" Title="Name">
            <FilterCellTemplate>
                <CustomFilterComponent FilterValue="@NameFilterValue"OnFilterChanged="async(string value)=>{await Filter(value,context);}" />
            </FilterCellTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private string NameFilterValue { get; set; }

    private async Task Filter(string value,FilterCellTemplateContext context)
    {
        var filter = context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;
        filter.Value = value;
        await context.FilterAsync();
    }

    public List<Item> GridData { get; set; } = new List<Item>
    {
        new Item { Name = "Alice" },
        new Item { Name = "Bob" },
        new Item { Name = "Charlie" }
    };

    public class Item
    {
        public string Name { get; set; }
    }
}