Local Virtual Scrolling
Documentation
The DataGrid widget supports virtual record scrolling, allowing end users to navigate the contents of the widget by using its vertical scrollbar. In this demo, the DataGrid is connected to 100,000 records and virtual scroll mode has been enabled to simplify record navigation and eliminate the use of data pagers.
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.
<template>
<dx-data-grid
id="gridContainer"
:customize-columns="customizeColumns"
:data-source="dataSource"
:show-borders="true"
@content-ready="onContentReady"
>
<dx-load-panel :enabled="true"/>
<dx-scrolling mode="virtual"/>
<dx-sorting mode="none"/>
</dx-data-grid>
</template>
<script>
import { DxDataGrid, DxScrolling, DxSorting, DxLoadPanel } from 'devextreme-vue/data-grid';
import { generateData } from './data.js';
export default {
components: {
DxDataGrid,
DxScrolling,
DxSorting,
DxLoadPanel
},
computed: {
dataSource() {
return generateData(100000);
}
},
methods: {
onContentReady(e) {
e.component.option('loadPanel.enabled', false);
},
customizeColumns(columns) {
columns[0].width = 70;
}
}
};
</script>
<style>
#gridContainer {
height: 440px;
}
</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.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.6/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>
let s = 123456789;
const random = function() {
s = (1103515245 * s + 12345) % 2147483647;
return s % (10 - 1);
};
export const generateData = function(count) {
var i;
var surnames = ['Smith', 'Johnson', 'Brown', 'Taylor', 'Anderson', 'Harris', 'Clark', 'Allen', 'Scott', 'Carter'];
var names = ['James', 'John', 'Robert', 'Christopher', 'George', 'Mary', 'Nancy', 'Sandra', 'Michelle', 'Betty'];
var gender = ['Male', 'Female'];
var items = [],
startBirthDate = Date.parse('1/1/1975'),
endBirthDate = Date.parse('1/1/1992');
for (i = 0; i < count; i++) {
var birthDate = new Date(startBirthDate + Math.floor(
random() *
(endBirthDate - startBirthDate) / 10));
birthDate.setHours(12);
var nameIndex = random();
var item = {
id: i + 1,
firstName: names[nameIndex],
lastName: surnames[random()],
gender: gender[Math.floor(nameIndex / 5)],
birthDate: birthDate
};
items.push(item);
}
return items;
};
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',
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' }
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});