filterRow

Specifies filter row options.

Type: Object

In DataGrid, an end-user can filter grid records at runtime using the filter row. This row is located below the grid row that contains column captions. By default, the filter row is hidden. To make it appear, set the visible option of the filterRow object to true.

To filter grid records by a value in a grid column, the user must enter the required value (or a part of it) in the filter row cell that belongs to this column. The matched records are determined according to the column's currently selected filter operation. To change this operation, the user must click the magnifying glass icon accompanying each filter row cell and choose the required filter operation from the appeared drop-down list.

NOTE
This feature is not available for hidden columns.
See Also

View Demo

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, a filter applies automatically when a user finishes typing a string in a filter row cell. Alternatively, you can give a user the opportunity to apply a filter at a required time. To do this, assign 'onClick' to the applyFilter option. In this case, a filter will be applied by a click on the "Apply Filter" button.

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

View Demo

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 the hint that pops up when a user hovers the mouse pointer over the "Apply Filter" button.

Type: String
Default Value: 'Apply filter'

betweenEndText

Specifies text for the range end in the 'between' filter type.

Type: String
Default Value: 'End'

betweenStartText

Specifies text for the range start in the 'between' filter type.

Type: String
Default Value: 'Start'

operationDescriptions

Specifies descriptions for filter operations.

Type: Object

When a user selects a filter operation, he or she uses the drop-down list of available operations that appears by a click on the magnifying glass icon in a filter row cell. Each operation in this list is represented by an icon symbolizing this operation and a descriptive text. Filter operations have descriptive texts specified by default, but if you are not satisfied with them, you can adjust them as required using the operationDescriptions option. This option accepts an object, wherein filter operations are associated with their descriptions. For example, in the following code, the description of the "startswith" filter operation is set to "Begins with".

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    filterRow: {
        // ...
        operationDescriptions: {
            'startswith': 'Begins with'
        }
    }
});

Note that if you do not have specified descriptions for all filter operations, the unspecified ones will have default descriptions.

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 in a filter list.

Type: String
Default Value: 'Reset'

The reset operation restores the default filter operation for a column. This operation depends on the type of data held by this column. The following table represents default filter operations by data types.

dataType Default filter operation
'string' 'contains'
'number' '='
'date' '='
'guid' '='

Reset is available from the drop-down list of available filters in a filter row cell. You can change the descriptive text that represents the reset operation in this list by specifying the resetOperationText 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 operation of clearing the applied filter when a select box is used.

Type: String
Default Value: '(All)'

When a column holds boolean values or uses lookup, a select box is used to filter grid records. Selecting an item in this select box filters grid records by this item. To clear the selection, a user must select the "All" item in the select box. You can specify a custom text for this item using the showAllText option.

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 or not an icon that allows the user to choose a filter operation is 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 or not.

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.