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.
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
$(function(){
var MILLISECONDS_IN_DAY = 1000 * 60 * 60 * 24,
dataGrid;
$("#grid-container").dxDataGrid({
dataSource: {
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"
]
},
selection: {
mode: "multiple",
deferred: true
},
filterRow: {
visible: true
},
onInitialized: function (e) {
dataGrid = e.component;
calculateStatistics();
},
selectionFilter: ["Task_Status", "=", "Completed"],
showBorders: true,
columns: [{
caption: "Subject",
dataField: "Task_Subject"
}, {
caption: "Start Date",
dataField: "Task_Start_Date",
width: "auto",
dataType: "date"
}, {
caption: "Due Date",
dataField: "Task_Due_Date",
width: "auto",
dataType: "date"
}, {
caption: "Assigned To",
dataField: "ResponsibleEmployee.Employee_Full_Name",
width: "auto",
allowSorting: false
}, {
caption: "Status",
width: "auto",
dataField: "Task_Status"
}]
}).dxDataGrid("instance");
function calculateStatistics() {
dataGrid.getSelectedRowsData().then(function (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 / MILLISECONDS_IN_DAY;
$("#tasks-count").text(rowData.length);
$("#people-count").text(
DevExpress.data.query(rowData)
.groupBy("ResponsibleEmployee.Employee_Full_Name")
.toArray()
.length
);
$("#avg-duration").text(Math.round(commonDuration / rowData.length) || 0);
});
}
$("#calculateButton").dxButton({
text: "Get statistics on the selected tasks",
type: "default",
onClick: calculateStatistics
});
});
<!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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/18.1.6/js/dx.all.js"></script>
<link rel="stylesheet" type ="text/css" href ="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="grid-container"></div>
<div class="selection-summary center">
<div id="calculateButton"></div>
<div>
<div class="column">
<span class="text count">Task count:</span>
<span class="value" id="tasks-count">0</span>
</div>
<div class="column">
<span class="text people-count">People assingned:</span>
<span class="value" id="people-count">0</span>
</div>
<div class="column">
<span class="text avg-duration">
Average task duration (days):
</span>
<span class="value" id="avg-duration">0</span>
</div>
</div>
</div>
</div>
</body>
</html>
#grid-container {
height: 400px;
}
.center {
text-align: center;
}
.selection-summary {
border: 1px solid rgba(161, 161,161, 0.2);
padding: 25px;
}
.column {
margin: 20px 30px 0 0;
display: inline-block;
white-space: nowrap;
text-align: right;
}
.value {
font-size: 40px;
display: inline-block;
vertical-align: middle;
}
.text {
text-align: left;
white-space: normal;
display: inline-block;
vertical-align: middle;
}
.avg-duration {
width: 100px;
}
.count{
width: 40px;
}
.people-count {
width: 65px;
}