Blazor Grid Filtering Toolbar SearchBox

New to Telerik UI for Blazor? Start a free 30-day trial

Updated on Jan 9, 2026

In addition to Grid filtering, you can enhance functionality by adding a SearchBox to the Grid Toolbar. This search box filters multiple Grid columns simultaneously.

Users type their query, and the Grid performs a case-insensitive Contains search on all visible string columns. To customize the filter delay and searchable columns, see the Customize the SearchBox section.

The SearchBox operates independently of Grid filtering, respecting existing filters and adding extra criteria to refine search results.

Basic Usage

To enable the built-in Grid SearchBox, use one of the following options:

Add a <GridToolBarSearchBoxTool> tag to the Grid ToolBar. This approach is suitable if you are not using a Grid ToolBar yet, or if you are using only built-in ToolBar tools.
RAZOR
```
<TelerikGrid>
    <GridToolBar>
        <GridToolBarSearchBoxTool />
    </GridToolBar>
</TelerikGrid>
```
Add a <GridSearchBox> tag to the Grid ToolBar Template. This approach is suitable if you have or need custom Grid ToolBar content.
RAZOR
```
<TelerikGrid>
    <GridToolBarTemplate>
        <GridSearchBox />
    </GridToolBarTemplate>
</TelerikGrid>
```

The following example shows the first option in action, while the customization demo below uses a GridToolBarTemplate.

Grid SearchBox

<TelerikGrid Data="@GridData"
             Height="90vh"
             Pageable="true">
    <GridToolBar>
        <GridToolBarSearchBoxTool Placeholder="Type a letter or digit..." Width="180px" />
    </GridToolBar>
    <GridColumns>
        <GridColumn Field="@nameof(GridModel.Id)" />
        <GridColumn Field="@nameof(GridModel.Name)" />
        <GridColumn Field="@nameof(GridModel.Description)" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<GridModel> GridData { get; set; } = new();

    protected override void OnInitialized()
    {
        Random rnd = Random.Shared;
        for (int i = 1; i <= 1000; i++)
        {
            GridData.Add(new GridModel()
            {
                Id = i,
                Name = $"{(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)} {rnd.Next(10, 100)}",
                Description = $"{(char)rnd.Next(97, 123)}{(char)rnd.Next(97, 123)} {rnd.Next(10, 100)}"
            });
        }
    }

    public class GridModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
    }
}

Search From Code

You can set or remove the search filters programmatically through the SearchFilter property of the Grid state.

Set and clear the Grid SearchBox filter programmatically

@using Telerik.DataSource

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             Pageable="true"
             Sortable="true">
    <GridToolBar>
        <GridToolBarCustomTool>
            <TelerikButton Icon="@SvgIcon.Search"
                        ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
                        OnClick="@OnSearchButtonClick">Search Programmatically</TelerikButton>
            <TelerikButton Icon="@SvgIcon.X"
                        OnClick="@OnClearButtonClick">Clear Search</TelerikButton>
        </GridToolBarCustomTool>
        <GridToolBarSearchBoxTool />
    </GridToolBar>
    <GridColumns>
        <GridColumn Field="@nameof(GridModel.Name)" />
        <GridColumn Field="@nameof(GridModel.Description)" />
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<GridModel>? GridRef { get; set; }

    private List<GridModel> GridData { get; set; } = new();

    private async Task OnSearchButtonClick()
    {
        if (GridRef is null)
        {
            return;
        }

        GridState<GridModel> gridState = GridRef.GetState();

        string searchString = $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)}";

        CompositeFilterDescriptor cfd = new();

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

        // Add one FilterDesccriptor for each string column
        cfd.FilterDescriptors.Add(new FilterDescriptor()
        {
            Member = nameof(GridModel.Name),
            MemberType = typeof(string),
            Operator = FilterOperator.Contains,
            Value = searchString
        });
        cfd.FilterDescriptors.Add(new FilterDescriptor()
        {
            Member = nameof(GridModel.Description),
            MemberType = typeof(string),
            Operator = FilterOperator.Contains,
            Value = searchString
        });

        gridState.SearchFilter = cfd;

        await GridRef.SetStateAsync(gridState);
    }

    private async Task OnClearButtonClick()
    {
        if (GridRef is null)
        {
            return;
        }

        GridState<GridModel> gridState = GridRef.GetState();

        (gridState.SearchFilter as CompositeFilterDescriptor)?.FilterDescriptors.Clear();

        await GridRef.SetStateAsync(gridState);
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 500; i++)
        {
            GridData.Add(new GridModel()
            {
                Id = i,
                Name = $"{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)} " +
                    $"{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)} {i}",
                Description = $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)} " +
                    $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)} {i}"
            });
        }
    }

    public class GridModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
    }
}

If you want to set an initial state to the Grid, use a similar snippet, but in the OnStateInit event

The GridToolBarSearchBoxTool and GridSearchBox components offer the same variety of parameters to customize its behavior.

DebounceDelay sets the time in milliseconds between the user typing ends and the search starts. This provides a performance optimization when using the OnRead event. Filtering does not occur on every keystroke during fast typing, unless DebounceDelay is set to 0.

The Grid searches in all visible string columns or a subset of theirs. It is also possible to programmatically search in string fields, which are not displayed in the Grid.

The example below demonstrates all SearchBox settings in action, and also how to move the SearchBox on the opposite side of the Grid ToolBar when using GridToolBarTemplate.

Grid SearchBox customizaton

<TelerikGrid Data="@GridData"
             Pageable="true"
             PageSize="20"
             Sortable="true"
             Height="90vh">
    <GridToolBarTemplate>
        <span class="k-toolbar-spacer"></span>
        <GridSearchBox Class="primary-searchbox"
                       DebounceDelay="300"
                       Fields="@SearchableFields"
                       FillMode="@ThemeConstants.SearchBox.FillMode.Outline"
                       Placeholder="Search Name Column..."
                       Rounded="@ThemeConstants.SearchBox.Rounded.Large"
                       Size="@ThemeConstants.SearchBox.Size.Small"
                       Width="240px" />
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(GridModel.Name)" />
        <GridColumn Field="@nameof(GridModel.Description)" />
    </GridColumns>
</TelerikGrid>

<style>
    .primary-searchbox {
        color: var(--kendo-color-primary);
    }
</style>

@code {
    private List<GridModel> GridData { get; set; } = new();

    private List<string> SearchableFields = new List<string> { nameof(GridModel.Name) };

    protected override void OnInitialized()
    {
        Random rnd = Random.Shared;
        for (int i = 1; i <= 1000; i++)
        {
            GridData.Add(new GridModel()
            {
                Id = i,
                Name = $"{(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)} {rnd.Next(10, 100)}",
                Description = $"{(char)rnd.Next(97, 123)}{(char)rnd.Next(97, 123)} {rnd.Next(10, 100)}"
            });
        }
    }

    public class GridModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
    }
}

Toolbar SearchBox

Basic Usage

Search From Code

Customize the SearchBox

See Also