Blazor DataGrid Example - Default Filtering
Category Name | Product Name | Quantity per Unit | Units in Stock | Discontinued |
|---|---|---|---|---|
| Beverages | Chai | 10 boxes x 20 bags | 39 | True |
| Beverages | Chang | 24 - 12 oz bottles | 17 | True |
| Beverages | Chartreuse verte | 750 cc per bottle | 69 | True |
| Beverages | Cte de Blaye | 12 - 75 cl bottles | 17 | False |
| Beverages | Ipoh Coffee | 16 - 500 g tins | 17 | True |
| Beverages | Lakkalikri | 500 ml | 57 | True |
| Beverages | Laughing Lumberjack Lager | 24 - 12 oz bottles | 52 | False |
| Beverages | Outback Lager | 24 - 355 ml bottles | 15 | False |
| Beverages | Rhnbru Klosterbier | 24 - 0.5 l bottles | 125 | False |
| Beverages | Sasquatch Ale | 24 - 12 oz bottles | 111 | True |
| Beverages | Steeleye Stout | 24 - 12 oz bottles | 20 | True |
| Condiments | Aniseed Syrup | 12 - 550 ml bottles | 13 | True |
This sample demonstrates the DataGrid filtering functionality using the filter bar input, including standard and advanced filtering capabilities.
The Blazor DataGrid allows users to view a subset of records by applying filter criteria, which can be enabled by setting the AllowFiltering property to true. Once enabled, a filter row appears below the column headers, where users can enter values to filter individual columns and press Enter to apply the filter.
The filter bar supports two activation modes:
- OnEnter - The filter is activated only when the Enter key is pressed, providing explicit control over filtering.
- Immediate - The filter begins automatically after a 1500ms delay from when the user stops typing, enabling real-time filtering without explicit activation. Configure the delay duration using the GridFilterSettings component's ImmediateModeDelay property.
Filtering behavior can be customized using the GridFilterSettings component.
By enabling the ShowFilterBarOperator property, operator dropdowns such as Equal, Not Equal, Greater Than, Less Than, Contains, Starts With, Ends With, etc... are displayed alongside each filter input, allowing users to perform precise filtering without manually entering operator expressions.
Additionally, the filter bar intelligently renders input controls based on the column data type to ensure type-safe and user-friendly filtering.
- String Columns: Display text input fields for entering filter values.
- Numeric Columns: Render numeric input controls that accept only valid numeric values.
- Date Columns: Display date picker controls for selecting filter dates.
- Time Columns: Display time controls for selecting filter times.
- DateTime Columns: Render datetime picker controls for precise date and time selection.
- Boolean Columns: Display dropdown controls with True/False options.
In this demo, to enable or disable Filterbar operator feature, check or uncheck the checkbox. For more detailed information about filtering, refer to the filtering documentation.
Looking for the full Blazor DataGrid component overview, features, pricing, and documentation? Visit our Blazor DataGrid component page.