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 CodeSandBox
Apply
Reset
<template> <div> <dx-data-grid id="grid-container" :data-source="dataSource" :show-borders="true" :selection-filter="selectionFilter" :on-initialized="onInitialized" > <dx-selection :deferred="true" mode="multiple" /> <dx-filter-row :visible="true"/> <dx-column caption="Subject" data-field="Task_Subject" /> <dx-column caption="Start Date" data-field="Task_Start_Date" width="auto" data-type="date" /> <dx-column caption="Due Date" data-field="Task_Due_Date" width="auto" data-type="date" /> <dx-column :allow-sorting="false" caption="Assigned To" data-field="ResponsibleEmployee.Employee_Full_Name" width="auto" /> <dx-column caption="Status" width="auto" data-field="Task_Status" /> </dx-data-grid> <div class="selection-summary center"> <dx-button id="calculateButton" :on-click="calculateStatistics" text="Get statistics on the selected tasks" type="default" /> <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> </div> </template> <script> import { DxDataGrid, DxColumn, DxFilterRow, DxSelection } from 'devextreme-vue/data-grid'; import DxButton from 'devextreme-vue/button'; import query from 'devextreme/data/query'; import 'devextreme/data/odata/store'; const MILLISECONDS_IN_DAY = 1000 * 60 * 60 * 24; export default { components: { DxDataGrid, DxColumn, DxFilterRow, DxSelection, DxButton, query }, data() { return { 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' ] }, selectionFilter: ['Task_Status', '=', 'Completed'], dataGrid: {}, taskCount: 0, peopleCount: 0, avgDuration: 0 }; }, methods: { onInitialized(e) { this.dataGrid = e.component; this.calculateStatistics(); }, calculateStatistics() { this.dataGrid.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 / 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; }); } } }; </script> <style> #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; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <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.1.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.7/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"/> </div> </body> </html>
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });