Your search did not match any results.
Data Grid

Filtering API

Documentation
The DataGrid widget ships with an integrated filtering API, allowing you apply filters in code. In this example, the grid’s filter function is called to filter data based on selections made within the drop-down menu above the DataGrid.
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"> <dxi-column dataField="Task_ID" 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" dataType="string" caption="Subject"></dxi-column> <dxi-column dataField="Task_Status" dataType="string" caption="Status"></dxi-column> </dx-data-grid>
import { NgModule, Component, ViewChild } 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'; @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { @ViewChild(DxDataGridComponent) 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);
/deep/ .right-side { position: absolute; right: 1px; top: 6px; } /deep/ .logo { line-height: 48px; } /deep/ .logo img { vertical-align: middle; margin: 0 5px; } /deep/ .dx-row.dx-data-row .employee { color: #bf4e6a; font-weight: bold; } /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 2 and DevExtreme here: // https://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js', 'typescript': 'npm:typescript@2.0.6/lib/typescript.js', '@angular/core': 'npm:@angular/core@2.4.3/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@2.4.3/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@2.4.3/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@2.4.3/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.4.3/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@2.4.3/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@3.4.3/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@2.4.3/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.0.3', 'devextreme': 'npm:devextreme@16.2', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme-angular': 'npm:devextreme-angular@16.2' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!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/16.2.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/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.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/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>