Your search did not match any results.
DataGrid

Horizontal Virtual Scrolling

Documentation

Horizontal virtual scrolling improves the widget's rendering performance because the widget only renders columns that are in the viewpoint. To enable this feature, set the scrolling.columnRenderingMode option to "virtual".

Copy to CodePen
Apply
Reset
$(function() { var columnCount = 500, rowCount = 50; $("#grid").dxDataGrid({ dataSource: generateData(rowCount, columnCount), columnWidth: 100, showBorders: true, scrolling: { columnRenderingMode: "virtual" }, paging: { 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="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/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/18.2.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/18.2.3/js/dx.all.js"></script> <script src="data.js"></script> <script src="index.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="grid"></div> </div> </body> </html>
#grid { max-height: 440px; }
var generateData = function (rowCount, columnCount) { var i, j; var items = []; for (i = 0; i < rowCount; i++) { var item = {}; for (j = 0; j < columnCount; j++) { item["field" + (j + 1)] = (i + 1) + "-" + (j + 1); } items.push(item); } return items; };