Remote Virtual Scrolling

Remote virtual scrolling allows the PivotGrid to load data pages from the server when they enter the viewport. To enable remote virtual scrolling, set the component's scrolling.mode property to "virtual" and the PivotGridDataSource's paginate property to true. Refer to the paginate description for more information about paging specifics.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC

Backend API

Copy to CodePen

Apply

Reset

$(() => { $('#sales').dxPivotGrid({ allowSorting: true, allowFiltering: true, height: 570, showBorders: true, fieldPanel: { visible: true, showFilterFields: false, }, fieldChooser: { allowSearch: true, }, headerFilter: { allowSearch: true, }, scrolling: { mode: 'virtual', }, dataSource: { paginate: true, fields: [ { dataField: '[Customer].[Customer]', area: 'row' }, { dataField: '[Ship Date].[Calendar Year]', area: 'column' }, { dataField: '[Ship Date].[Month of Year]', area: 'column' }, { dataField: '[Measures].[Internet Sales Amount]', area: 'data' }, ], store: { type: 'xmla', url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll', catalog: 'Adventure Works DW Standard Edition', cube: 'Adventure Works', }, }, }); });

<!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.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/22.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/22.2.3/js/dx.all.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 class="long-title"><h3>Sales Statistics</h3></div> <div id="sales"></div> </div> </body> </html>

.long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }