Free Trial Buy
    Your search did not match any results.
    Data Grid

    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".

    Prev Demo Next Demo

    jQuery

    AngularJS

    Angular

    Vue

    React

    ASP.NET MVC

    ASP.NET Core

    Copy to CodePen
    Apply
    Reset
    var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { var columnCount = 500, rowCount = 50; $scope.gridOptions = { 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.7/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/18.2.7/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" ng-app="DemoApp" ng-controller="DemoController"> <div id="grid" dx-data-grid="gridOptions"></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; };