Components / Grid / Filtering

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

Toolbar SearchBox

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, adjusting the filters accordingly. To customize the filter delay and selected fields, see the Customize the SearchBox section.

The SearchBox operates independently of Grid filtering, respecting existing filters and adding extra criteria to refine search results. To enable the SearchBox, include the tag in the .

To enable the SearchBox, add the <GridSearchBox> tag in the <GridToolBarTemplate>.

Grid SearchBox

<TelerikGrid Data="@GridData"
             Pageable="true"
             Sortable="true">
    <GridToolBarTemplate>
        <GridSearchBox />
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.Description)" />
    </GridColumns>
</TelerikGrid>

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

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 50; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = i,
                Name = $"{(char)(64 + i % 26 + 1)}{(char)(64 + i % 26 + 1)} {i}",
                Description = $"{(char)(123 - i % 26 - 1)}{(char)(123 - i % 26 - 1)} {i}"
            });
        }
    }

    public class SampleModel
    {
        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">
    <GridToolBarTemplate>
        <GridSearchBox />
        <TelerikButton Icon="@SvgIcon.Search"
                       ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
                       OnClick="@OnSearchButtonClick">Search Programmatically</TelerikButton>
        <TelerikButton Icon="@SvgIcon.X"
                       OnClick="@OnClearButtonClick">Clear Search</TelerikButton>
    </GridToolBarTemplate>
    <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 != null)
        {
            var gridState = GridRef.GetState();

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

            var cfd = new CompositeFilterDescriptor();

            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 != null)
        {
            var 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 GridSearchBox component offers the following parameters to customize its behavior:

Parameter Type and Default Value Description
Class string The custom CSS class that renders on the SearchBox wrapper (<span class="k-searchbox">).
DebounceDelay int
(300)		 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.
Fields List<string> The collection of model properties to search in. By default, the Grid searches in all visible columns that are bound to string fields. You can only define a subset of those fields. It is also possible to programmatically search in string fields, which are not displayed in the Grid.
Placeholder string
("Search...")		 The textbox placeholder that hints the user what the SearchBox does. The built-in default value is localized.
Width string Specifies the width of the SearchBox component.

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

Grid SearchBox customizaton

<TelerikGrid Data="@GridData"
             Pageable="true"
             Sortable="true">
    <GridToolBarTemplate>
        <span class="k-toolbar-spacer"></span>
        <GridSearchBox Class="primary-searchbox"
                       DebounceDelay="300"
                       Fields="@SearchableFields"
                       Placeholder="Search Name Column..."
                       Width="240px" />
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.Description)" />
    </GridColumns>
</TelerikGrid>

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

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

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

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 50; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = i,
                Name = $"{(char)(64 + i % 26 + 1)}{(char)(64 + i % 26 + 1)} {i}",
                Description = $"{(char)(123 - i % 26 - 1)}{(char)(123 - i % 26 - 1)} {i}"
            });
        }
    }

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

See Also

In this article
Related articles
Not finding the help you need? Improve this article