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.
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
$(function() { $("#dataGridContainer").dxDataGrid({ filterRow: { visible: true }, columns: [{ // ... allowFiltering: false }] }); });
Angular
<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
$(function() { $("#dataGridContainer").dxDataGrid({ filterRow: { visible: true, applyFilter: "onClick" } }); });
Angular
<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.
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
$(function() { $("#dataGridContainer").dxDataGrid({ filterRow: { visible: true }, columns: [{ // ... selectedFilterOperation: "contains", filterOperations: [] }] }); });
Angular
<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.
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
$(function() { $("#dataGridContainer").dxDataGrid({ headerFilter: { visible: true }, columns: [{ // ... allowHeaderFiltering: false }] }); });
Angular
<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
$(function() { $("#dataGridContainer").dxDataGrid({ columns: [{ // ... filterType: "exclude" // or "include" }] }); });
Angular
<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
$(function() { $("#dataGridContainer").dxDataGrid({ headerFilter: { visible: true, allowSearch: true }, columns: [{ // ... headerFilter: { allowSearch: false } }] }); });
Angular
<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.
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
$(function() { $("#dataGridContainer").dxDataGrid({ searchPanel: { visible: true }, columns: [{ // ... allowSearch: false }] }); });
Angular
<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.
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
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
<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
$(function () { // ... $("#button").dxButton({ text: "Apply Filter", onClick: function () { var filter = $("#filterBuilder").dxFilterBuilder("instance").option("value"); $("#dataGrid").dxDataGrid("instance").filter(filter); }, }); });
Angular
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>
See Also
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
$(function() { $("#dataGridContainer").dxDataGrid({ fitlerRow: { visible: true }, columns: [{ // ... dataField: "isOnVacation", selectedFilterOperation: "=", filterValue: true }] }); });
$("#dataGridContainer").dxDataGrid("columnOption", "isOnVacation", "filterValue", false);
Angular
<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
$(function() { $("#dataGridContainer").dxDataGrid({ headerFilter: { visible: true }, columns: [{ // ... dataField: "OrderDate", filterType: "exclude", filterValues: [2014] }] }); });
$("#dataGridContainer").dxDataGrid("columnOption", "OrderDate", "filterValues", [2014, 2015]);
Angular
<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
$(function() { $("#dataGridContainer").dxDataGrid({ searchPanel: { visible: true, text: "Pending" } }); });
$("#dataGridContainer").dxDataGrid("searchByText", "Solved");
Angular
<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
$("#dataGridContainer").dxDataGrid("filter", [ [ "Cost", ">", 1000 ], "and", [ "Cost", "<=", 2000 ] ]);
Angular
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
$("#dataGridContainer").dxDataGrid("getCombinedFilter", true);
Angular
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:
- "row"
Clears the filter row. - "header"
Clears the header filter. - "search"
Clears the search panel. - "dataSource"
Clears the data source filter, whether defined in the configuration or applied by the filter(filterExpr) method. - Without any parameter
Clears all filters at once.
jQuery
// Clears the search panel $("#dataGridContainer").dxDataGrid("clearFilter", "search");
Angular
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 ], // ... })
If you have technical questions, please create a support ticket in the DevExpress Support Center.