Your search did not match any results.
Data Grid

Virtual Scrolling

API Reference
The DevExtreme HTML5 Data Grid Widget supports virtual record scrolling, allowing end-users to navigate the contents of the grid by using its vertical scrollbar. In this demo, the grid is connected to 100,000 records and virtual scroll mode has been enabled to simplify record navigation and eliminate the use of data pagers.
Copy to Codepen
Apply
Reset
$(function(){ $("#gridContainer").dxDataGrid({ dataSource: generateData(100000), customizeColumns: function (columns) { columns[0].width = 70; }, loadPanel: { enabled: false }, scrolling: { mode: "virtual" }, sorting: { mode: "none" } }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/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; width: 100%; }
var s = 55; var random = function() { s = Math.sin(s) * 10000; return s - Math.floor(s); }; var 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))); birthDate.setHours(12); var nameIndex = Math.floor(random() * names.length); var item = { id: i + 1, firstName: names[nameIndex], lastName: surnames[Math.floor(random() * surnames.length)], gender: gender[Math.floor(nameIndex / 5)], birthDate: birthDate }; items.push(item); } return items; };