Your search did not match any results.
DataGrid

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.
Copy to CodePen
Apply
Reset
$(function() { $("#gridContainer").dxDataGrid({ dataSource: generateData(100000), customizeColumns: function (columns) { columns[0].width = 70; }, loadPanel: { enabled: true }, scrolling: { mode: "virtual" }, sorting: { mode: "none" }, onContentReady: function(e) { e.component.option("loadPanel.enabled", false); } }); });
<!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/17.1.7/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.7/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/17.1.7/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; }
var s = 123456789; var random = function() { s = (1103515245 * s + 12345) % 2147483647; return s % (10 - 1); }; 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) / 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; };