Your search did not match any results.
Data Grid

Infinite Scrolling

Documentation

The DataGrid widget provides a capability to navigate from a page to a page gradually without using a pager. For this purpose, an infinite scroll mode has been introduced. Data pages in this mode are loaded when the scroll bar reaches the end of its scale. This demo illustrates how you can enable the infinite scroll mode.

Copy to CodeSandBox
Apply
Reset
<template> <dx-data-grid id="gridContainer" :customize-columns="customizeColumns" :data-source="dataSource" :show-borders="true" > <dx-load-panel :enabled="false"/> <dx-scrolling mode="infinite"/> <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: { 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.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/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 } });