Your search did not match any results.
Data Grid

Deferred Selection


The DataGrid widget supports deferred row selection. When it is enabled, the DataGrid does not make requests for data until this is demanded from the API. In this demo, data is loaded when the jQuery Deferred object returned by the getSelectedRowsData() method is resolved. To specify initially selected rows, the selectionFilter option is used. Use deferred selection mode when working with a huge amount of remote data.

Copy to CodeSandBox
<dx-data-grid id="grid-container" [dataSource]="dataSource" [selectionFilter]="['Task_Status', '=', 'Completed']" [showBorders]="true"> <dxo-selection mode="multiple" [deferred]="true" ></dxo-selection> <dxo-filter-row [visible]="true" ></dxo-filter-row> <dxi-column caption="Subject" dataField="Task_Subject" ></dxi-column> <dxi-column caption="Start Date" dataField="Task_Start_Date" width="auto" dataType="date" ></dxi-column> <dxi-column caption="Due Date" dataField="Task_Due_Date" width="auto" dataType="date" ></dxi-column> <dxi-column caption="Assigned To" dataField="ResponsibleEmployee.Employee_Full_Name" width="auto" [allowSorting]="false" ></dxi-column> <dxi-column caption="Status" dataField="Task_Status" width="auto" ></dxi-column> </dx-data-grid> <div class="selection-summary center"> <dx-button id="calculateButton" text="Get statistics on the selected tasks" type="default" (onClick)="calculateStatistics()" ></dx-button> <div> <div class="column"> <span class="text count">Task count:</span> <span class="value">{{taskCount}}</span> </div> <div class="column"> <span class="text people-count">People assingned:</span> <span class="value">{{peopleCount}}</span> </div> <div class="column"> <span class="text avg-duration">Average task duration (days):</span> <span class="value">{{avgDuration}}</span> </div> </div> </div>
import { NgModule, Component, ViewChild, AfterViewInit, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDataGridModule, DxDataGridComponent, DxButtonModule } from 'devextreme-angular'; import query from 'devextreme/data/query'; import 'devextreme/data/odata/store'; if(!/localhost/.test( { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], preserveWhitespaces: true }) export class AppComponent implements AfterViewInit { @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent; MILLISECONDS_IN_DAY = 1000 * 60 * 60 * 24; dataSource: any = { store: { type: "odata", url: "", key: "Task_ID" }, expand: "ResponsibleEmployee", select: [ "Task_ID", "Task_Subject", "Task_Start_Date", "Task_Due_Date", "Task_Status", "ResponsibleEmployee/Employee_Full_Name" ] }; taskCount = 0; peopleCount = 0; avgDuration = 0; ngAfterViewInit() { this.calculateStatistics(); } calculateStatistics() { this.dataGrid.instance.getSelectedRowsData().then((rowData) => { var commonDuration = 0; for (var i = 0; i < rowData.length; i++) { commonDuration += rowData[i].Task_Due_Date - rowData[i].Task_Start_Date; } commonDuration = commonDuration / this.MILLISECONDS_IN_DAY; this.taskCount = rowData.length; this.peopleCount = query(rowData) .groupBy("ResponsibleEmployee.Employee_Full_Name") .toArray() .length; this.avgDuration = Math.round(commonDuration / rowData.length) || 0; }); } } @NgModule({ imports: [ BrowserModule, DxDataGridModule, DxButtonModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #grid-container { height: 400px; } ::ng-deep .center { text-align: center; } ::ng-deep .selection-summary { border: 1px solid rgba(161, 161,161, 0.2); padding: 25px; } ::ng-deep .column { margin: 20px 30px 0 0; display: inline-block; white-space: nowrap; text-align: right; } ::ng-deep .value { font-size: 40px; display: inline-block; vertical-align: middle; } ::ng-deep .text { text-align: left; white-space: normal; display: inline-block; vertical-align: middle; } ::ng-deep .avg-duration { width: 100px; } ::ng-deep .count{ width: 40px; } ::ng-deep .people-count { width: 65px; }
// 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: // System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, }, paths: { 'npm:': '' }, 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.9', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.7', '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=""> <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="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></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>