DevExtreme Vue - 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. Clicking a header filter icon invokes a popup menu with all the column's unique values. A user includes or excludes values from the filter by selecting or clearing their selection in this menu.

DevExtreme HTML5 JavaScript jQuery Knockout Angular DataGrid Filtering HeaderFilter

Assign true to the headerFilter.visible option to make header filter icons visible for all columns. Set a column's allowHeaderFiltering option to false if its header filter should not be available. Note that this option inherits the allowFiltering option's value 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
    ],
    // ...
})

The header filter provides a searching capability that you can enable using the headerFilter.allowSearch option. The same option can be declared in a column's configuration object, in which case it controls searching in that column's header filter.

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

A header filter's popup menu 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 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

Filter Builder

The FilterBuilder widget helps a user build a complex filter expression and apply it to all grid columns at once.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid FilterBuilder

To integrate the FilterBuilder with the DataGrid, first, pass an array of columns that should be filtered to the FilterBuilder's fields option. Each item in this array should at least have the dataField. The following code allows using all DataGrid columns in the FilterBuilder:

jQuery
JavaScript
var columns = [{
    caption: "ID",
    dataField: "Product_ID",
    dataType: "number"
}, {
    dataField: "Product_Name"
}, {
    caption: "Cost",
    dataField: "Product_Cost",
    dataType: "number",
    format: "currency"
}];

$(function () {
    $("#dataGrid").dxDataGrid({
        dataSource: products, 
        columns: columns
    });
    $("#filterBuilder").dxFilterBuilder({
        fields: columns
    });
});
Angular
HTML
TypeScript
<dx-filter-builder 
    [fields]="columns">
</dx-filter-builder>
<dx-data-grid 
    [dataSource]="products"  
    [columns]="columns">
</dx-data-grid>
import { DxDataGridModule, DxFilterBuilderModule } from 'devextreme-angular';
// ...
export class AppComponent {
    columns = [{
        caption: "ID",
        dataField: "Product_ID",
        dataType: "number"
    }, {
        dataField: "Product_Name"
    }, {
        caption: "Cost",
        dataField: "Product_Cost",
        dataType: "number",
        format: "currency"
    }];
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        DxFilterBuilderModule
    ],
    // ...
})

Then, add a button that updates a filter of the DataGrid's data source according to the build filter expression. The value option stores this expression.

jQuery
JavaScript
$(function () {
    // ...
    $("#button").dxButton({
        text: "Apply Filter",
        onClick: function () {
            var filter = $("#filterBuilder").dxFilterBuilder("instance").option("value");
            $("#dataGrid").dxDataGrid("instance").filter(filter);
        },
    });
});
Angular
TypeScript
HTML
import { 
    DxDataGridModule, 
    DxFilterBuilderModule, 
    DxDataGridComponent, 
    DxFilterBuilderComponent 
} from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    @ViewChild(DxFilterBuilderComponent) filterBuilder: DxFilterBuilderComponent;
    // ...
    buttonClick() {
        this.dataGrid.filter(this.filterBuilder.value);
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        DxFilterBuilderModule
    ],
    // ...
})
<dx-button 
    text="Apply Filter"
    (onClick)="buttonClick()">
</dx-button>

View Demo

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
    ],
    // ...
})