Filter Row

 
Order ID Order Date Product Name Unit Price Customer Shipped  
102487/4/2014Queso Cabrales$14.00Paul Henriot (Vins et alcools Chevalier)
102667/26/2014Queso Manchego La Pastora$30.00Pirkko Koskitalo (Wartian Herkku)
102969/3/2014Queso Cabrales$17.00Carlos González (LILA-Supermercado)
1032710/11/2014Queso Cabrales$17.00Maria Larsson (Folk och fä HB)
1035311/13/2014Queso Cabrales$17.00Georg Pipps (Piccolo und mehr)
1036511/27/2014Queso Cabrales$17.00Antonio Moreno (Antonio Moreno Taquería)
104071/7/2015Queso Cabrales$17.00Henriette Pfalzheim (Ottilies Käseladen)
104342/3/2015Queso Cabrales$17.00Maria Larsson (Folk och fä HB)
104392/7/2015Queso Manchego La Pastora$30.00Jean Fresnière (Mère Paillarde)
104422/11/2015Queso Cabrales$17.00Roland Mendel (Ernst Handel)
104432/12/2015Queso Cabrales$17.00Maurizio Moroni (Reggiani Caseifici)
104663/6/2015Queso Cabrales$17.00Pedro Afonso (Comércio Mineiro)
104863/26/2015Queso Cabrales$17.00Carlos Hernández (HILARION-Abastos)
104893/28/2015Queso Cabrales$17.00Georg Pipps (Piccolo und mehr)
105285/6/2015Queso Cabrales$21.00Howard Snyder (Great Lakes Food Market)
105355/13/2015Queso Cabrales$21.00Antonio Moreno (Antonio Moreno Taquería)
105365/14/2015Queso Manchego La Pastora$38.00Renate Messner (Lehmanns Marktstand)
105425/20/2015Queso Cabrales$21.00Philip Cramer (Königlich Essen)
105435/21/2015Queso Manchego La Pastora$38.00Carlos González (LILA-Supermercado)
105455/22/2015Queso Cabrales$21.00John Steel (Lazy K Kountry Store)
Data grid with 52 rows and 7 columns
0 rows are selected

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.