Filter Row

Order ID Order Date Product Name Unit Price Customer Shipped  
10248 7/4/2014 Queso Cabrales $14.00 Paul Henriot (Vins et alcools Chevalier)
10266 7/26/2014 Queso Manchego La Pastora $30.00 Pirkko Koskitalo (Wartian Herkku)
10296 9/3/2014 Queso Cabrales $17.00 Carlos González (LILA-Supermercado)
10327 10/11/2014 Queso Cabrales $17.00 Maria Larsson (Folk och fä HB)
10353 11/13/2014 Queso Cabrales $17.00 Georg Pipps (Piccolo und mehr)
10365 11/27/2014 Queso Cabrales $17.00 Antonio Moreno (Antonio Moreno Taquería)
10407 1/7/2015 Queso Cabrales $17.00 Henriette Pfalzheim (Ottilies Käseladen)
10434 2/3/2015 Queso Cabrales $17.00 Maria Larsson (Folk och fä HB)
10439 2/7/2015 Queso Manchego La Pastora $30.00 Jean Fresnière (Mère Paillarde)
10442 2/11/2015 Queso Cabrales $17.00 Roland Mendel (Ernst Handel)

The DevExpress Blazor Grid allows users to filter data as needs dictate. Enable the ShowFilterRow property to activate the integrated DevExpress Grid Filter Row (displays in-place text editors for all data columns). When a user enters a value into an editor, the Grid creates a filter condition based on the value and applies this condition to the corresponding column.

You can use the following column properties to customize filter row behavior:

  • FilterRowOperatorType - Specifies an operator used to create a filter condition based on the filter row value. If you do not define this option, the Grid chooses the operator type automatically: Contains for columns bound to String data types; Equals for all others.
  • FilterRowValue - Specifies the initial value in the filter row editor. If you define this property, you should also specify the FilterRowOperatorType property.
  • FilterRowEditorVisible - Specifies whether to display the filter row editor.

You can define the column's FilterRowCellTemplate to display a custom editor in the filter row cell. Use the template's context parameter to access the FilterRowValue and FilterCriteria properties. These properties specify current filter row values and the entire filter criteria applied to the column. In this demo, the Product Name column displays a predefined text editor, and the FilterRowCellTemplate is defined for all other data columns.

Our Blazor Grid also supports a command column with a Clear button that resets the filter. To display this column, declare a DxGridCommandColumn objects in the Columns template.

To manage filter options in code, you can call the FilterBy and ClearFilter methods.