Configuration scrolling

A configuration object specifying scrolling options.

Type: Object

The dxPivotGrid widget enables an end-user to scroll grid records. To specify required scrolling behavior, use the mode property of the scrolling configuration object.

View Demo

mode

Specifies the scrolling mode.

Type: String
Default Value: 'standard'
Accepted Values: 'standard' | 'virtual'

There are two different scrolling modes.

  • Standard Mode
    In a standard scrolling mode, the grid loads the entire summary data at once. This operation may affect grid performance as the loaded data may contain many summary values.

  • Virtual Mode
    In a virtual scrolling mode, the grid loads a summary value at runtime when it gets into a field of vision. Once a summary cell is out of the field of vision, it is removed from the grid. This behavior allows an end-user to scroll through large amounts of grid records without notable lags.

View Demo

useNative

Specifies whether or not the widget uses native scrolling.

Type: String|Boolean
Default Value: 'auto'

Show Example:
AngularJS
Knockout
jQuery

Use the select box below the pivot grid to specify whether or not the widget must use native scrolling.

<div ng-controller="pivotGridController">
    <div style="height:280px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row',
                expanded: true
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: cityText
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        fieldChooser: { enabled: false },
        bindingOptions: {
            'scrolling.useNative': 'useNativeScrolling'
        }
    }"></div>
    <div style="height:40px; margin-top:5px; text-align:center">
        Use Native Scrolling:&nbsp;
        <div style="display:inline-block; vertical-align:middle" dx-select-box="{
            dataSource: [
                { name: 'auto', value: 'auto' },
                { name: 'true', value: true },
                { name: 'false', value: false }
            ],
            valueExpr: 'value',
            displayExpr: 'name',
            bindingOptions: {
                value: 'useNativeScrolling'
            }
        }"></div>
    </div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.useNativeScrolling = 'auto';
        $scope.cityText = function (data) {
            return data.city + ' (' + data.country + ')';
        };
        $scope.sales = sales;
    });
    
angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

Use the select box below the pivot grid to specify whether or not the widget must use native scrolling.

<div style="height:280px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        store: sales,
        fields: [{
            dataField: 'region',
            width: 120,
            area: 'row',
            expanded: true 
        }, {
            dataField: 'city',
            width: 150,
            area: 'row',
            selector: function (data) {
                return data.city + ' (' + data.country + ')';
            }
        }, {
            dataField: 'date',
            dataType: 'date',
            area: 'column'
        }, {
            dataField: 'amount',
            summaryType: 'sum',
            format: 'currency',
            area: 'data'
        }]
    },
    fieldChooser: { enabled: false },
    scrolling: {
        useNative: useNativeScrolling
    }
}"></div>
<div style="height:40px; margin-top:5px; text-align:center">
    Use Native Scrolling:&nbsp;
    <div style="display:inline-block; vertical-align:middle" data-bind="dxSelectBox: {
        dataSource: [
            { name: 'auto', value: 'auto' },
            { name: 'true', value: true },
            { name: 'false', value: false }
        ],
        valueExpr: 'value',
        displayExpr: 'name',
        value: useNativeScrolling
    }"></div>
</div>
var viewModel = {
    useNativeScrolling: ko.observable('auto')
};

ko.applyBindings(viewModel);

Use the select box below the pivot grid to specify whether or not the widget must use native scrolling.

<div id="pivotGridContainer" style="height:280px; max-width:750px; margin:0 auto"></div>
<div style="height:40px; margin-top:5px; text-align:center">
    Use Native Scrolling:&nbsp;
    <div id="selectBoxContainer" style="display:inline-block; vertical-align:middle"></div>
</div>
$(function () {
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            store: sales,
            fields: [{
                dataField: "region",
                width: 120,
                area: "row",
                expanded: true
            }, {
                dataField: "city",
                width: 150,
                area: "row",
                selector: function (data) {
                    return data.city + " (" + data.country + ")";
                }
            }, {
                dataField: "date",
                dataType: "date",
                area: "column"
            }, {
                dataField: "amount",
                summaryType: "sum",
                format: "currency",
                area: "data"
            }]
        },
        fieldChooser: { enabled: false }
    });
    
    $("#selectBoxContainer").dxSelectBox({
        dataSource: [
            { name: 'auto', value: 'auto' },
            { name: 'true', value: true },
            { name: 'false', value: false }
        ],
        valueExpr: 'value',
        displayExpr: 'name',
        value: 'auto',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('scrolling.useNative', e.value);
        }
    });
});