Filtering and Searching

Filter Row

The filter row allows a user to filter data by values of individual columns. Usually, cells in the filter row are text boxes, but in columns that hold date or Boolean values, those cells contain controls more suitable for filtering, like calendars or select boxes.

DevExtreme HTML5 JavaScript jQuery Knockout Angular DataGrid Filtering FilterRow

To make the filter row visible, assign true to the filterRow.visible option. You can set a column's allowFiltering option to false if data should never be filtered by it.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        filterRow: { visible: true },
        columns: [{
            // ...
            allowFiltering: false
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-filter-row [visible]="true"></dxo-filter-row>
    <dxi-column [allowFiltering]="false" ... ></dxi-column>
</dx-data-grid>
import { DxDataGridModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

A user-specified filter applies automatically with a delay by default. Alternatively, it can be applied by a click on the "Apply Filter" button if you set the filterRow.applyFilter option to "onClick".

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        filterRow: {
            visible: true,
            applyFilter: "onClick"
        }
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-filter-row
        [visible]="true"
        applyFilter="onClick">
    </dxo-filter-row>
</dx-data-grid>
import { DxDataGridModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

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 Knockout Angular DataGrid Filtering FilterRow

The set of available filters can be restricted using the filterOperations option. You can also preselect a filter with the selectedFilterOperation option. Combining these two options, you can preselect a filter and disallow a user to change it, for example:

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        filterRow: { visible: true },
        columns: [{
            // ...
            selectedFilterOperation: "contains",
            filterOperations: []
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-filter-row [visible]="true"></dxo-filter-row>
    <dxi-column ...
        selectedFilterOperation="contains"
        [filterOperations]="[]">
    </dxi-column>
</dx-data-grid>
import { DxDataGridModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
See Also

Header Filter

A header filter allows a user to filter values in an individual column by including or excluding them from the applied filter. A click on a header filter icon invokes a popup menu with all unique values in the column. By selecting or clearing the selection of values in this menu, the user includes or excludes them from the filter.

DevExtreme HTML5 JavaScript jQuery Knockout Angular DataGrid Filtering HeaderFilter

To make header filter icons visible for all columns, assign true to the headerFilter.visible option. Set a column's allowHeaderFiltering option to false if its header filter should not be available. Note that this option inherits the value of the allowFiltering option by default.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        headerFilter: { visible: true },
        columns: [{
            // ...
            allowHeaderFiltering: false
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-header-filter [visible]="true"></dxo-header-filter>
    <dxi-column [allowHeaderFiltering]="false" ... ></dxi-column>
</dx-data-grid>
import { DxDataGridModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

A user can change the applied filter by including or excluding values to/from it. Use a column's filterType option to specify the required mode.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        columns: [{
            // ...
            filterType: "exclude" // or "include"
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-column ...
        [filterType]="exclude"> <!-- or "include" -->
    </dxi-column>
</dx-data-grid>
import { DxDataGridModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

A header filter's popup menu simply lists all column values by default. You can group them using the headerFilter.groupInterval option if they are numbers or dates. You can also provide a completely custom data source for a header filter using the dataSource option. Refer to the option's description for details.

See Also

Search Panel

The search panel allows searching for values in several columns at once. Search is case-insensitive.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid SearchPanel

To make the search panel visible, assign true to the searchPanel.visible option. You can set a column's allowSearch option to false if it should be excluded from searching. Note that this option inherits the value of the allowFiltering option by default.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        searchPanel: { visible: true },
        columns: [{
            // ...
            allowSearch: false
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-search-panel [visible]="true"></dxo-search-panel>
    <dxi-column [allowSearch]="false" ... ></dxi-column>
</dx-data-grid>
import { DxDataGridModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Search is performed differently depending on a column's data type. Numeric, Boolean, and date columns require that a user enters a full value into the search panel. For columns that contain string values, entering only a part of a value is enough to find it.

See Also

API

Initial and Runtime Filtering

The API for filtering differs depending on the UI element that it affects. To specify an initial value for a filter row cell, set a column's selectedFilterOperation and filterValue options. You can also change these options with the columnOption method to assign a new value to a fitler row cell at runtime.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        fitlerRow: { visible: true },
        columns: [{
            // ...
            dataField: "isOnVacation",
            selectedFilterOperation: "=",
            filterValue: true
        }]
    });
});
JavaScript
$("#dataGridContainer").dxDataGrid("columnOption", "isOnVacation", "filterValue", false);
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-filter-row [visible]="true"></dxo-filter-row>
    <dxi-column ...
        dataField="isOnVacation"
        selectedFilterOperation="="
        [filterValue]="true">
    </dxi-column>
</dx-data-grid>
import { ..., ViewChild } from '@angular/core';
import { DxDataGridModule, DxDataGridComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    setFilterValue (dataFieldName, newValue) {
        this.dataGrid.instance.columnOption(dataFieldName, "filterValue", newValue);
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

To specify initial values for a header filter, set a column's filterType and filterValues options. You can change these options with the columnOption method at runtime as well.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        headerFilter: { visible: true },
        columns: [{
            // ...
            dataField: "OrderDate",
            filterType: "exclude",
            filterValues: [2014]
        }]
    });
});
JavaScript
$("#dataGridContainer").dxDataGrid("columnOption", "OrderDate", "filterValues", [2014, 2015]);
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-header-filter [visible]="true"></dxo-header-filter>
    <dxi-column ...
        dataField="OrderDate"
        filterType="exclude"
        [filterValues]="[2014]">
    </dxi-column>
</dx-data-grid>
import { ..., ViewChild } from '@angular/core';
import { DxDataGridModule, DxDataGridComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    setFilterValues (dataFieldName, newValue) {
        this.dataGrid.instance.columnOption(dataFieldName, "filterValues", newValue);
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

You can specify an initial text for the search panel using the searchPanel.text option. Call the searchByText(text) method to change the text at runtime.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        searchPanel: {
            visible: true,
            text: "Pending"
        }
    });
});
JavaScript
$("#dataGridContainer").dxDataGrid("searchByText", "Solved");
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-search-panel [visible]="true" text="Pending"></dxo-search-panel>
</dx-data-grid>
import { ..., ViewChild } from '@angular/core';
import { DxDataGridModule, DxDataGridComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    setSearchString (newString) {
        this.dataGrid.instance.searchByText(newString);
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

All the aforementioned options and methods filter data that was returned by the data source. If you need to pre-filter data in the data source, call the filter(filterExpr) method passing a filter expression as an argument. Note that this filter can be cleared only programmatically.

jQuery
JavaScript
$("#dataGridContainer").dxDataGrid("filter", [
    [ "Cost", ">", 1000 ],
    "and",
    [ "Cost", "<=", 2000 ]
]);
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxDataGridModule, DxDataGridComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    filterByCost () {
        this.dataGrid.instance.filter([
            [ "Cost", ">", 1000 ],
            "and",
            [ "Cost", "<=", 2000 ]
        ]);
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Since there are many ways to filter data, you may need to get a filter combined from all applied filters. For this, call the getCombinedFilter() method. It returns the filter with getters by default. Call it passing true as the argument to get the combined filter with data fields.

jQuery
JavaScript
$("#dataGridContainer").dxDataGrid("getCombinedFilter", true);
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxDataGridModule, DxDataGridComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    getCombinedFilter () {
        return this.dataGrid.instance.getCombinedFilter(true);
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
See Also

Clear Filtering Settings

Use the clearFilter(filterName) method to clear filtering settings. You can call it with one of the following parameters:

jQuery
JavaScript
// Clears the search panel
$("#dataGridContainer").dxDataGrid("clearFilter", "search");
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxDataGridModule, DxDataGridComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    clearSearchPanel () {
        this.dataGrid.instance.clearFilter("search");
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})