Remote Grouping
Remote (server-side) operations can boost the DataGrid's performance on large datasets. In this demo, the DataGrid works with a million records seamlessly because they are processed on the server.
To notify the DataGrid that it works with a pre-processed dataset, set the remoteOperations option to true.
You can also specify options that allow the widget to load data on demand to reduce the amount of transmitted data. Set the grouping.autoExpandAll option to false to collapse all the groups at startup. Data for each group is loaded only when the user expands the group. Enable the "virtual" scrolling.mode to load only those records that come into the viewport when the grid is scrolled vertically.
The DataGrid communicates with the server according to a protocol. Refer to the Load Data article for information on it.
Feel free to share demo-related thoughts here.
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.
<template>
<dx-data-grid
id="gridContainer"
:remote-operations="{ groupPaging: true }"
:word-wrap-enabled="true"
:data-source="dataSource"
:show-borders="true"
>
<dx-scrolling
mode="virtual"
/>
<dx-group-panel :visible="true"/>
<dx-grouping :auto-expand-all="false"/>
<dx-column
:width="75"
data-field="Id"
data-type="number"
/>
<dx-column
:width="150"
data-field="ProductSubcategoryName"
caption="Subcategory"
/>
<dx-column
:width="150"
:group-index="0"
data-field="StoreName"
caption="Store"
/>
<dx-column
:width="120"
:group-index="1"
data-field="ProductCategoryName"
caption="Category"
/>
<dx-column
data-field="ProductName"
caption="Product"
/>
<dx-column
:width="100"
data-field="DateKey"
caption="Date"
data-type="date"
format="yyyy-MM-dd"
/>
<dx-column
:width="100"
data-field="SalesAmount"
caption="Amount"
format="currency"
/>
<dx-summary>
<dx-group-item
column="Id"
summary-type="count"
/>
</dx-summary>
</dx-data-grid>
</template>
<script>
import { DxDataGrid, DxScrolling, DxColumn, DxGrouping, DxGroupPanel, DxSummary, DxGroupItem } from 'devextreme-vue/data-grid';
import * as AspNetData from 'devextreme-aspnet-data-nojquery';
export default {
components: {
DxDataGrid,
DxColumn,
DxScrolling,
DxGrouping,
DxGroupPanel,
DxSummary,
DxGroupItem
},
data() {
return {
dataSource: AspNetData.createStore({
key: 'Id',
loadUrl: 'https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/Sales'
})
};
}
};
</script>
<style>
#gridContainer {
height: 420px;
width: 100%;
}
</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.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/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">
<span v-if="false">Loading...</span>
</div>
</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:systemjs-vue-browser@latest/index.js',
'devextreme': 'npm:devextreme@19.1',
'devextreme-vue': 'npm:devextreme-vue@19.1',
'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@2.4.2',
jszip: 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.6/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' },
'devextreme-aspnet-data-nojquery': {
'esModule': true
}
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});