Your search did not match any results.
Data Grid

Filtering API

The DataGrid includes the following API you can use to filter data:

In this demo, you can use the SelectBox widget to filter the grid's dataSource. The "All" item calls the clearFilter() method and the other items call the filter(filterExpr) method.

Copy to CodeSandBox
Apply
Reset
<div class="left-side"> <div class="logo"> <img src="../../../../images/logo-devav.png" /> <img src="../../../../images/logo-tasks.png" /> </div> </div> <div class="right-side"> <dx-select-box [items]="statuses" [value]="statuses[0]" (onValueChanged)="selectStatus($event)"></dx-select-box> </div> <dx-data-grid id="gridContainer" [columnAutoWidth]="true" [dataSource]="tasks" [showBorders]="true"> <dxi-column dataField="Task_ID" [width]="80" dataType="number"></dxi-column> <dxi-column dataField="Task_Start_Date" dataType="date" caption="Start Date"></dxi-column> <dxi-column cssClass="employee" dataField="ResponsibleEmployee.Employee_Full_Name" dataType="string" caption="Assigned To" [allowSorting]="false"></dxi-column> <dxi-column dataField="Task_Subject" [width]="350" dataType="string" caption="Subject"></dxi-column> <dxi-column dataField="Task_Status" dataType="string" caption="Status"></dxi-column> </dx-data-grid>
import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDataGridComponent, DxDataGridModule, DxSelectBoxModule } from 'devextreme-angular'; import 'devextreme/data/odata/store'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], preserveWhitespaces: true }) export class AppComponent { @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent; statuses: string[]; tasks: any; constructor() { this.statuses = ["All", "Not Started", "In Progress", "Need Assistance", "Deferred", "Completed"]; this.tasks = { store: { type: "odata", url: "https://js.devexpress.com/Demos/DevAV/odata/Tasks" }, expand: "ResponsibleEmployee", select: [ "Task_ID", "Task_Subject", "Task_Start_Date", "Task_Due_Date", "Task_Status", "Task_Priority", "ResponsibleEmployee/Employee_Full_Name" ] }; } selectStatus(data) { if (data.value == "All") { this.dataGrid.instance.clearFilter(); } else { this.dataGrid.instance.filter(["Task_Status", "=", data.value]); } } } @NgModule({ imports: [ BrowserModule, DxDataGridModule, DxSelectBoxModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .right-side { position: absolute; right: 1px; top: 6px; } ::ng-deep .logo { line-height: 48px; } ::ng-deep .logo img { vertical-align: middle; margin: 0 5px; } ::ng-deep .dx-row.dx-data-row .employee { color: #bf4e6a; font-weight: bold; } ::ng-deep #gridContainer { margin: 20px 0; height: 400px; }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.4.5/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs', 'devextreme': 'npm:devextreme@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.17', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.10', 'devextreme-angular': 'npm:devextreme-angular@20.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, packageConfigPaths: [ "npm:*/package.json", "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular@20.1/*/package.json", "npm:devextreme-angular@20.1/ui/*/package.json", ] });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.8/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.8/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.10.2/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>