Search Grid on Button Click

Environment

Product

Grid for Blazor

Description

I am using the Grid SearchBox, but I don't want it to search for every typed letter. I would like a button next to the search textbox set the search filter after the button is clicked.

Solution

1. Bind the Grid with an OnRead event handler.
2. Replace the GridSearchBox with a TextBox and a Button with an OnClick event handler.
3. Optionally, handle the TextBox OnChange event too. This will allow searching on textbox blur and Enter keypress.
4. In the click/change handler, build a CompositeFilterDescriptor with a LogicalOperator of Or. Populate its FilterDescriptors collection with filters for all searchable Grid model fields.
5. Add the composite filter descriptor to the Grid State to search programmatically.

Note the difference between searching and filtering in the Grid state. Filtering affects the Grid's filtering UI (row or menu), while searching does not.

Also see the Filter Descriptors documentation, which explains the differences between FilterDescriptor and CompositeFilterDescriptor.

Search Grid Programmatically on Button Click

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid TItem="@GridItem"
             OnRead="@GridReadHandler"
             Pageable="true"
             PageSize="5"
             @ref="@GridRef">
    <GridToolBarTemplate>
        <TelerikTextBox @bind-Value="@SearchValue" Width="200px" OnChange="@SearchGrid" />
        <TelerikButton OnClick="@SearchGrid" Icon="@SvgIcon.Search">Search Grid</TelerikButton>
        <TelerikButton OnClick="@ClearSearch" Icon="@SvgIcon.Cancel">Clear Search</TelerikButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(GridItem.Name1)" />
        <GridColumn Field="@nameof(GridItem.Name2)" />
    </GridColumns>
</TelerikGrid>

@code {
    List<GridItem> GridData { get; set; } = new List<GridItem>();
    TelerikGrid<GridItem> GridRef { get; set; }

    string SearchValue { get; set; }

    async Task SearchGrid()
    {
        var state = GridRef.GetState();

        var cfd = new CompositeFilterDescriptor();
        cfd.LogicalOperator = FilterCompositionLogicalOperator.Or;
        cfd.FilterDescriptors = new FilterDescriptorCollection();

        // add one FilterDescriptor for each string column to search in

        cfd.FilterDescriptors.Add(new FilterDescriptor()
        {
            Member = nameof(GridItem.Name1),
            Value = SearchValue,
            Operator = FilterOperator.Contains
        });

        cfd.FilterDescriptors.Add(new FilterDescriptor()
        {
            Member = nameof(GridItem.Name2),
            Value = SearchValue,
            Operator = FilterOperator.Contains
        });

        state.SearchFilter = cfd;
        await GridRef.SetStateAsync(state);
    }

    async Task ClearSearch()
    {
        var state = GridRef.GetState();
        state.SearchFilter = null;
        await GridRef.SetStateAsync(state);

        SearchValue = String.Empty;
    }

    private async Task GridReadHandler(GridReadEventArgs args)
    {
        var result = GridData.ToDataSourceResult(args.Request);
        args.Data = result.Data;
        args.Total = result.Total;
    }

    protected override Task OnInitializedAsync()
    {
        for (int j = 1; j <= 25; j++)
        {
            GridData.Add(new GridItem() {
                ID = j,
                Name1 = "Name " + (char)(j + 64) + (char)(j + 64),
                Name2 = "Name " + (char)(j + 65) + (char)(j + 65)
            });
        }

        return base.OnInitializedAsync();
    }

    public class GridItem
    {
        public int ID { get; set; }
        public string Name1 { get; set; }
        public string Name2 { get; set; }
    }
}

See Also

• Search the Grid in Numeric and Date Model Fields
• Search the Grid in Hidden Fields
• Search the Grid with a StartsWith operator
• Format or Bold Search Results in the Grid