filterRow

Configures the filter row.

Type:

Object

The filter row allows a user to filter data by values of individual columns.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid FilterRow

Each cell in the filter row contains a magnifying glass icon, pausing on which opens a drop-down list with filters available for the column.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid FilterRow

To make the filter row visible, assign true to the filterRow.visible option.

View Demo

See Also
Show Example:
AngularJS
Knockout
jQuery

In this example, the filter row is made visible by setting the filterRow.visible option to true. In addition, a filter operation is selected for each grid column from code using the selectedFilterOperation option. This operation can not be changed at runtime, because the filterRow.showOperationChooser option is set to false.


                                    

                                    

In this example, the filter row is made visible by setting the filterRow.visible option to true. In addition, a filter operation is selected for each grid column from code using the selectedFilterOperation option. This operation can not be changed at runtime, because the filterRow.showOperationChooser option is set to false.


                                    

                                    

In this example, the filter row is made visible by setting the filterRow.visible option to true. In addition, a filter operation is selected for each grid column from code using the selectedFilterOperation option. This operation can not be changed at runtime, because the filterRow.showOperationChooser option is set to false.


                                    

                                    

applyFilter

Specifies when to apply a filter.

Type:

String

Default Value: 'auto'
Accepted Values: 'auto' | 'onClick'

By default, the filter applies automatically after a user finishes entering a value into a cell of the filter row. Alternatively, the filter can be applied on a click on the "Apply Filter" button. To enable this mode, assign "onClick" to the applyFilter option.

When using the widget as an ASP.NET MVC Control, specify this option using the GridApplyFilterMode enum. This enum accepts the following values: Auto and OnClick.

Show Example:
AngularJS
Knockout
jQuery

In this example, the applyFilter option is set to 'onClick'. This setting supplies the grid with the "Apply Filter" button. Type a text in any filter row cell and then click the "Apply Filter" button to apply filtering.


                                    

                                    

In this example, the applyFilter option is set to 'onClick'. This setting supplies the grid with the "Apply Filter" button. Type a text in any filter row cell and then click the "Apply Filter" button to apply filtering.


                                    

                                    

In this example, the applyFilter option is set to 'onClick'. This setting supplies the grid with the "Apply Filter" button. Type a text in any filter row cell and then click the "Apply Filter" button to apply filtering.


                                    

                                    

applyFilterText

Specifies text for a hint that appears when a user pauses on a button that applies the filter.

Type:

String

Default Value: 'Apply filter'

betweenEndText

Specifies a placeholder for the editor that specifies the end of a range when a user selects the "between" filter operation.

Type:

String

Default Value: 'End'
See Also

betweenStartText

Specifies a placeholder for the editor that specifies the start of a range when a user selects the "between" filter operation.

Type:

String

Default Value: 'Start'
See Also

operationDescriptions

Specifies descriptions for filter operations on the filter list.

Type:

Object

See Also
Show Example:
AngularJS
Knockout
jQuery

In this example, you can change descriptions of filter operations at runtime using the set of controls under the grid. Choose a filter operation, whose textual representation must be changed, from the drop-down menu. Then, enter a required description for this operation into the textbox. To assign the description to the operation, click the "Change Description" button. To see the changes, hover over the filter operation chooser of any column.


                                    

                                    

In this example, you can change descriptions of filter operations at runtime using the set of controls under the grid. Choose a filter operation, whose textual representation must be changed, from the drop-down menu. Then, enter a required description for this operation into the textbox. To assign the description to the operation, click the "Change Description" button. To see the changes, hover over the filter operation chooser of any column.


                                    

                                    

In this example, you can change descriptions of filter operations at runtime using the set of controls under the grid. Choose a filter operation, whose textual representation must be changed, from the drop-down menu. Then, enter a required description for this operation into the textbox. To assign the description to the operation, click the "Change Description" button. To see the changes, hover over the filter operation chooser of any column.


                                    

                                    

resetOperationText

Specifies text for the reset operation on the filter list.

Type:

String

Default Value: 'Reset'

The reset operation restores the default filter, which depends on the column's data type. For details on default filters by data types, refer to the description of the selectedFilterOperation option.

Show Example:
AngularJS
Knockout
jQuery

In this example, the filterRow.resetOperationText option is used to alter the text that represents the reset operation in a filter list. To see the altered text, hover over the filter operation chooser of any grid column.


                                    

                                    

In this example, the filterRow.resetOperationText option is used to alter the text that represents the reset operation in a filter list. To see the altered text, hover over the filter operation chooser of any grid column.


                                    

                                    

In this example, the filterRow.resetOperationText option is used to alter the text that represents the reset operation in a filter list. To see the altered text, hover over the filter operation chooser of any grid column.


                                    

                                    

showAllText

Specifies text for the item that clears the applied filter. Used only when a cell of the filter row contains a select box.

Type:

String

Default Value: '(All)'

In columns that contain Boolean values or use lookup, a user filters data with a select box. To clear the applied filter, the user selects the "All" item in this select box. The showAllText option specifies text for this item.

Show Example:
AngularJS
Knockout
jQuery

In this example, "Format" is declared as a lookup column. To filter grid records by this column, use the select box that occupies the filter row cell of this column. Note that in this select box, the operation of clearing the applied filter is represented by the '(Show All)' item. Text for this item is set using the filterRow.showAllText option.


                                    

                                    

In this example, "Format" is declared as a lookup column. To filter grid records by this column, use the select box that occupies the filter row cell of this column. Note that in this select box, the operation of clearing the applied filter is represented by the '(Show All)' item. Text for this item is set using the filterRow.showAllText option.


                                    

                                    

In this example, "Format" is declared as a lookup column. To filter grid records by this column, use the select box that occupies the filter row cell of this column. Note that in this select box, the operation of clearing the applied filter is represented by the '(Show All)' item. Text for this item is set using the filterRow.showAllText option.


                                    

                                    

showOperationChooser

Specifies whether icons that open the filter lists are visible.

Type:

Boolean

Default Value: true

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the visibility of the operation chooser at runtime using the check box below the grid.


                                    

                                    

In this example, you can change the visibility of the operation chooser at runtime using the check box below the grid.


                                    

                                    

In this example, you can change the visibility of the operation chooser at runtime using the check box below the grid.


                                    

                                    

visible

Specifies whether the filter row is visible.

Type:

Boolean

Default Value: false

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the visibility of the filter row at runtime using the check box below the grid.


                                    

                                    

In this example, you can change the visibility of the filter row at runtime using the check box below the grid.


                                    

                                    

In this example, you can change the visibility of the filter row at runtime using the check box below the grid.