Blazor DataGrid Example - Checkbox Filtering
Order ID Press Alt Down to open filter Menu | Customer ID Press Alt Down to open filter Menu | Freight Press Alt Down to open filter Menu | Ship City Press Alt Down to open filter Menu | Ship Country Press Alt Down to open filter Menu |
|---|
| 10001 | ALFKI | $2.30 | Berlin | Denmark |
| 10002 | ANATR | $3.30 | Madrid | Brazil |
| 10003 | ANTON | $4.30 | Cholchester | Germany |
| 10004 | BLONP | $5.30 | Marseille | Austria |
| 10005 | BOLID | $6.30 | Tsawassen | Switzerland |
| 10006 | ALFKI | $4.60 | Berlin | Denmark |
| 10007 | ANATR | $6.60 | Madrid | Brazil |
| 10008 | ANTON | $8.60 | Cholchester | Germany |
| 10009 | BLONP | $10.60 | Marseille | Austria |
| 10010 | BOLID | $12.60 | Tsawassen | Switzerland |
| 10011 | ALFKI | $6.90 | Berlin | Denmark |
| 10012 | ANATR | $9.90 | Madrid | Brazil |
This sample demonstrates how to use the checkbox filter UI to filter DataGrid columns effectively.
The Blazor DataGrid filtering feature enables users to view a subset of records based on defined filter criteria. To enable filtering, set the AllowFiltering property to true.
The DataGrid supports the following filter types:
- Filterbar - Displays a filter input row below the headers
- Menu - Shows filter options in a dropdown menu
- Checkbox - Provides checkbox selection from available values
- Excel - Offers Excel-like filtering interface
Change the filter type using the Type property of the GridFilterSettings component.
In this demo, click the filtering icon in the column header to display the checkbox filter UI for that specific column.
For more detailed information about filtering, refer to the filtering documentation.