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)
of 6

The DevExpress Blazor Grid allows users to filter data as needs dictate. Enable the ShowFilterRow property to activate the integrated DevExpress Grid Filter Row (which displays in-place 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; Equal 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.

The Grid allows you to customize the filter row editors in the following ways:

In this demo, the Customer column's settings are modified to display values from an external collection in the data rows and in the filter row. The CustomizeFilterRowEditor event handler hides the Clear button for Order Id and Order Date columns; the FilterRowCellTemplate property implements the custom filter for the Unit Price column.

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

For more information, refer to the following topics: Filter Row, Filter API.

This demo comes with an enabled Integrated editor render mode. In this mode, the Grid renders editors in filter rows so that they occupy the entire cell; editor borders are not displayed.