Skip to main content

Filter Data in Blazor Grid

  • 2 minutes to read

The Grid allows you to add filter UI capabilities to your application and to filter grid data in code.

Filter Row UI

The filter row displays in-place editors for all data columns. When a user types into an editor, the Grid creates a filter condition based on the editor value and applies this condition to the corresponding column.

For more information, see the following topic: Filter Row in Blazor Grid.

Run Demo: Data Grid - Filter Row

Blazor Grid Filter Row

Search Box UI

Once a user enters text into the search box, the Grid looks for matches in the display text of every visible column. The component filters data to show only the rows with matching values. Data cells highlight the search results.

For more information, see the following topic: Search Box in Blazor Grid.

Run Demo: Grid - Search Box

Search Box Overview

Column Filter Menu

An Excel-inspired drop-down filter displays unique column values as a checklist, includes a search box, and the Select All option.

For more information, see the following topic: Column Filter Menu in Blazor Grid.

Run Demo: Grid - Column Filter Menu

Grid Filter Menu

Filter API

The Grid implements methods to filter grid data in code. For more information, see the following topic: Filter API in Blazor Grid.

Run Demo: Grid - Filter API