Your search did not match any results.
Data Grid

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.
Copy to Codepen
Apply
Reset
$(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"], 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().done(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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.5/js/dx.all.js"></script> <script src="data.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; color: #337ab7; 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; }