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.
$(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.5.1/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/20.1.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.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;
}