Filter Row

The Grid is currently available as a community technology preview (CTP).
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)

Our Blazor Grid allows users to filter its data. Enable the ShowFilterRow property to activate the filter row that displays in-place text 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.

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 data of the String type; Equals in other cases.
  • 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. They specify the current filter row value and the entire filter criteria applied to the column. In this demo, the Product Name column displays the predefined text editor, and the FilterRowCellTemplate is defined for all other data columns.

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

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