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
@(Html.DevExtreme().DataGrid()
.ID("grid-container")
.ShowBorders(true)
.DataSource(d => d.OData()
.Url("https://js.devexpress.com/Demos/DevAV/odata/Tasks")
.Key("Task_ID")
.Expand("ResponsibleEmployee"))
.DataSourceOptions(o => o.Select(new string[] {
"Task_ID",
"Task_Subject",
"Task_Start_Date",
"Task_Due_Date",
"Task_Status",
"ResponsibleEmployee/Employee_Full_Name"
}))
.Selection(s => s
.Mode(SelectionMode.Multiple)
.Deferred(true))
.FilterRow(f => f.Visible(true))
.OnInitialized("dataGrid_initialized")
.SelectionFilter(new object[] { "Task_Status", "=", "Completed" })
.Columns(columns => {
columns.Add()
.DataField("Task_Subject")
.Caption("Subject");
columns.Add()
.DataField("Task_Start_Date")
.Caption("Start Date")
.Width("auto")
.DataType(GridColumnDataType.Date);
columns.Add()
.DataField("Task_Due_Date")
.Caption("Due Date")
.Width("auto")
.DataType(GridColumnDataType.Date);
columns.Add()
.DataField("ResponsibleEmployee.Employee_Full_Name")
.Caption("Assigned To")
.Width("auto")
.AllowSorting(false);
columns.Add()
.DataField("Task_Status")
.Caption("Status")
.Width("auto");
})
)
<div class="selection-summary center">
@(Html.DevExtreme().Button()
.Text("Get statistics on the selected tasks")
.Type(ButtonType.Default)
.OnClick("calculateStatistics")
)
<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>
<script>
var MILLISECONDS_IN_DAY = 1000 * 60 * 60 * 24;
function getDataGridInstance() {
return $("#grid-container").dxDataGrid("instance");
}
function calculateStatistics() {
getDataGridInstance().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);
});
}
function dataGrid_initialized(e) {
calculateStatistics();
}
</script>
using DevExtreme.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.DataGrid;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class DataGridController : Controller {
public ActionResult DeferredSelection() {
return View();
}
}
}
#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;
}