JavaScript/jQuery DataGrid - filterRow

Configures the filter row.

Type:

FilterRow

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

DevExtreme HTML5 JavaScript jQuery Angular Knockout DataGrid FilterRow

Each cell in the filter row contains a magnifying glass icon. Hovering over this icon opens a drop-down list with filters available for the column.

DevExtreme HTML5 JavaScript jQuery Angular Knockout DataGrid FilterRow

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

NOTE
If you use a grouped data structure to display data in a lookup column, the All item in the filter row is not displayed.

DataGrid Demo TreeList Demo

See Also

applyFilter

Specifies when to apply a filter.

Type:

ApplyFilterMode

Default Value: 'auto'

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 property.

View Demo

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:

FilterRowOperationDescriptions

The following code sample illustrates how to set this property:

jQuery
index.js
$(function() {
    $("#dataGridContainer").dxDataGrid({
        filterRow: {
            // ...
            operationDescriptions: {
                startsWith: "Begins with"
            }
        }
    });
});
Angular
app.component.html
app.module.ts
<dx-data-grid ... >
    <dxo-filter-row ... >
        <dxo-operation-descriptions
            startsWith="Begins with">
        </dxo-operation-descriptions>
    </dxo-filter-row>
</dx-data-grid>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxFilterRow ... >
            <DxOperationDescriptions
                starts-with="Begins with"
            />
        </DxFilterRow>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxFilterRow,
    DxOperationDescriptions
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxFilterRow,
        DxOperationDescriptions
    },
    // ...
}
</script>
React
App.js
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    FilterRow,
    OperationDescriptions
} from 'devextreme-react/data-grid';

export default function App() {
    return (
        <DataGrid ... >
            <FilterRow ... >
                <OperationDescriptions
                    startsWith="Begins with"
                />
            </FilterRow>
        </DataGrid>
    );
}
See Also

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 property.

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 property specifies text for this item.

showOperationChooser

Specifies whether icons that open the filter lists are visible.

Type:

Boolean

Default Value: true
NOTE
If a column does not display a filter icon, specify the column's dataType and ensure that the column's allowFiltering property is not disabled.

visible

Specifies whether the filter row is visible.

Type:

Boolean

Default Value: false

DataGrid Demo TreeList Demo