Deferred Selection
Documentation
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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<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(document.location.host)) {
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: "https://js.devexpress.com/Demos/DevAV/odata/Tasks",
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:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
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@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@3.4.5/lib/typescript.js',
'@angular/core': 'npm:@angular/core@8.0.0/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@8.0.0/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@8.0.0/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@8.0.0/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@8.0.0/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'npm:@angular/router@8.0.0/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@8.0.0/bundles/forms.umd.js',
'@angular/common/http': 'npm:@angular/common@8.0.0/bundles/common-http.umd.js',
'tslib': 'npm:tslib/tslib.js',
'rxjs': 'npm:rxjs@6.3.3',
'rxjs/operators': 'npm:rxjs@6.3.3/operators',
'devextreme': 'npm:devextreme@19.2',
'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.7/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
'devexpress-gantt': 'npm:devexpress-gantt',
'devextreme-angular': 'npm:devextreme-angular@19.2'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'rxjs': { main: 'index.js', defaultExtension: 'js' },
'rxjs/operators': { main: 'index.js', 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/19.2.3/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/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.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>