DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery Data Grid - Infinite Scrolling

If the JavaScript DataGrid component is bound to a large dataset, you can enable infinite scroll mode to optimize data load times and improve user navigation. The component initially displays one page of rows. When users scroll to the end of the view, the JavaScript DataGrid loads an additional page. Users can only load pages sequentially and cannot skip to arbitrary positions within the dataset.

To enable infinite scroll mode, set the scrolling.mode to "infinite".

In this demo, the JavaScript DataGrid is bound to a dataset of 100,000 records. Scroll to the last record to load the next page of records.

Backend API
$(() => { $('#gridContainer').dxDataGrid({ dataSource: generateData(100000), keyExpr: 'id', showBorders: true, customizeColumns(columns) { columns[0].width = 70; }, loadPanel: { enabled: false, }, scrolling: { mode: 'infinite', }, sorting: { mode: 'none', }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <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=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> </div> </body> </html>
#gridContainer { height: 440px; }
let s = 123456789; const random = function () { s = (1103515245 * s + 12345) % 2147483647; return s % (10 - 1); }; const generateData = function (count) { let i; const surnames = ['Smith', 'Johnson', 'Brown', 'Taylor', 'Anderson', 'Harris', 'Clark', 'Allen', 'Scott', 'Carter']; const names = ['James', 'John', 'Robert', 'Christopher', 'George', 'Mary', 'Nancy', 'Sandra', 'Michelle', 'Betty']; const gender = ['Male', 'Female']; const items = []; const startBirthDate = Date.parse('1/1/1975'); const endBirthDate = Date.parse('1/1/1992'); for (i = 0; i < count; i += 1) { const birthDate = new Date(startBirthDate + Math.floor( (random() * (endBirthDate - startBirthDate)) / 10, )); birthDate.setHours(12); const nameIndex = random(); const item = { id: i + 1, firstName: names[nameIndex], lastName: surnames[random()], gender: gender[Math.floor(nameIndex / 5)], birthDate, }; items.push(item); } return items; };