Blazor DataGrid Example - Menu Filter Interface
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 | Order Date Press Alt Down to open filter Menu | Order Time Press Alt Down to open filter Menu | Ship City Press Alt Down to open filter Menu |
|---|
| 10001 | ALFKI | $2.30 | 5/15/1991 | 10:00 AM | Berlin |
| 10002 | ANATR | $3.30 | 4/4/1990 | 11:10 AM | Madrid |
| 10003 | ANTON | $4.30 | 11/30/1957 | 12:10 PM | Cholchester |
| 10004 | BLONP | $5.30 | 10/22/1930 | 3:30 PM | Marseille |
| 10005 | BOLID | $6.30 | 2/18/1953 | 4:20 PM | Tsawassen |
| 10006 | ALFKI | $4.60 | 5/15/1991 | 10:00 AM | Berlin |
| 10007 | ANATR | $6.60 | 4/4/1990 | 11:10 AM | Madrid |
| 10008 | ANTON | $8.60 | 11/30/1957 | 12:10 PM | Cholchester |
| 10009 | BLONP | $10.60 | 10/22/1930 | 3:30 PM | Marseille |
| 10010 | BOLID | $12.60 | 2/18/1953 | 4:20 PM | Tsawassen |
| 10011 | ALFKI | $6.90 | 5/15/1991 | 10:00 AM | Berlin |
| 10012 | ANATR | $9.90 | 4/4/1990 | 11:10 AM | Madrid |
This sample demonstrates how to use the menu filter UI to filter DataGrid columns.
The Blazor DataGrid filtering feature allows users to view records based on filter criteria. To enable filtering, set the AllowFiltering property to true.
Change the filter type using the Type property of the GridFilterSettings component. The following filter types are supported:
- Filterbar - Text-based input row
- Menu - Dropdown filter menu
- Checkbox - Checkbox value selection
- Excel - Excel-like advanced filtering
The DataGrid allows customization of default filter components in the filter menu dialog through the FilterEditorSettings property of each grid column. This enables you to tailor filter behavior and appearance to your specific requirements.
In this demo, the following customizations are implemented:
- Order ID: Uses a NumericTextBox component with ShowClearButton enabled and Min value set to 10,000.
- Customer ID: Customizes the AutoComplete component by disabling Autofill and setting DebounceDelay to 2,000 ms.
- Ship City: Customizes the AutoComplete component by enabling Autofill and setting MinLength to 2.
- Order Time: Uses the TimePicker component with Step interval set to 10 minutes.
In this demo, click the filtering icon in the column header to display the menu filter UI.
For more detailed information about filter menus, refer to the filter menu documentation.