Configuration scrolling

    A configuration object specifying scrolling options.

    Type: Object

    The DataGrid widget supplies a user with an opportunity to scroll grid records. Scrolling can be performed within one page when used in conjunction with the pager or throughout the whole data source. In the latter case, data is still loaded by pages but a user moves through them continuously without noticing it. To specify required scrolling behavior, use the mode property of the scrolling configuration object.

    View Demo

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the infinite scrolling mode is specified for a grid using the scrolling | mode option. Data for this example is obtained from www.odata.org.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            columns: columns,
            scrolling: { mode: 'infinite' }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.columns = [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, the infinite scrolling mode is specified for a grid using the scrolling | mode option. Data for this example is obtained from www.odata.org.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: {
            store: {
                type: 'odata',
                jsonp: true,
                url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
            }
        },
        columns: columns,
        scrolling: { mode: 'infinite' }
    }"></div>
    
    var myViewModel = {
        columns: [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ]
    }
    ko.applyBindings(myViewModel);
    

    In this example, the infinite scrolling mode is specified for a grid using the scrolling | mode option. Data for this example is obtained from www.odata.org.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        var scrollingModes = ['standard', 'virtual', 'infinite'];
    
        $("#gridContainer").dxDataGrid({
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            columns: [
                { dataField: 'OrderID', width: 90 },
                { dataField: 'ShipName', caption: 'Name', width: 190 },
                { dataField: 'ShipCity', caption: 'City' },
                { dataField: 'ShipCountry', caption: 'Country' },
                'OrderDate',
                'RequiredDate'
            ],
            scrolling: { mode: 'infinite' }
        });
    });
    

    mode

    Specifies the scrolling mode.

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

    DataGrid provides three modes of scrolling. For a comprehensive overview, refer to the Vertical Scrolling article.

    View Demo

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can spot the difference between three modes of scrolling provided by the DataGrid widget. Choose a required mode using the select box under the grid, and then scroll grid records. Note that when the standard mode is chosen, the grid is supplied with a pager automatically. Data for this example is obtained from www.odata.org.

    <div ng-controller="demoController" style="text-align:center; height:500px; max-width:800px; margin: 0 auto">
        <div style="height:500px; width:800px">
            <div style="max-height:450px" dx-data-grid="{
                height: 500,
                dataSource: {
                    store: {
                        type: 'odata',
                        jsonp: true,
                        url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                    }
                },
                columns: columns,
                bindingOptions: {
                    'scrolling.mode': 'scrollingMode'
                }
            }"></div>
            <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
                <div style="display:table-cell;vertical-align:middle">Select a Scrolling Mode:&nbsp;</div>
                <div style="display:table-cell;width:150px" ng-model="scrollingMode" dx-select-box="{
                    items: scrollingModes
                }"></div>
            </div>
        </div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.columns = [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'];
        $scope.scrollingModes = ['standard', 'virtual', 'infinite'];
        $scope.scrollingMode = 'standard';
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can spot the difference between three modes of scrolling provided by the DataGrid widget. Choose a required mode using the select box under the grid, and then scroll grid records. Note that when the standard mode is chosen, the grid is supplied with a pager automatically. Data for this example is obtained from www.odata.org.

    <div style="text-align:center;height:500px; width:800px; margin: 0 auto">
        <div style="max-height:450px" data-bind="dxDataGrid: {
            height: 500,
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            columns: columns,
            scrolling: { mode: scrollingMode }
        }"></div>
            <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
                <div style="display:table-cell;vertical-align:middle">Select a Scrolling Mode:&nbsp;</div>
                <div style="display:table-cell;width:150px" data-bind="dxSelectBox: {
            items: scrollingModes,
            value: scrollingMode
        }"></div>
        </div>
    </div>
    
    var myViewModel = {
        columns: [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'],
        scrollingModes: ['standard', 'virtual', 'infinite'],
        scrollingMode: ko.observable('standard')
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can spot the difference between three modes of scrolling provided by the DataGrid widget. Choose a required mode using the select box under the grid, and then scroll grid records. Note that when the standard mode is chosen, the grid is supplied with a pager automatically. Data for this example is obtained from www.odata.org.

    <div style="text-align:center;height:500px; width:800px; margin: 0 auto">
        <div id="gridContainer" style="max-height:450px"></div>
        <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
            <div style="display:table-cell;vertical-align:middle">Select a Scrolling Mode:&nbsp;</div>
            <div style="display:table-cell;width:150px" id="selectBoxContainer"></div>
        </div>
    </div>
    
    var scrollingModes = ['standard', 'virtual', 'infinite'];
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            height: 500,
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            columns: [
                { dataField: 'OrderID', width: 90 },
                { dataField: 'ShipName', caption: 'Name', width: 190 },
                { dataField: 'ShipCity', caption: 'City' },
                { dataField: 'ShipCountry', caption: 'Country' },
                'OrderDate',
                'RequiredDate'
            ],
            scrolling: { mode: 'standard' }
        });
    
        $("#selectBoxContainer").dxSelectBox({
            height: 35,
            width: 150,
            items: scrollingModes,
            value: scrollingModes[0],
            onValueChanged: function (info) {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.option({
                    scrolling: { mode: info.value }
                });
            }
        });
    });
    

    preloadEnabled

    Specifies whether or not a grid must preload pages adjacent to the current page when using virtual scrolling.

    Type: Boolean
    Default Value: false

    In the virtual scrolling mode, the grid loads a page when it gets into the grid's field of vision. Additionally, it can preload the pages adjacent to the currently displayed page. To enable this feature, assign true to the preloadEnabled option. With preloading enabled, the DataGrid widget scrolls records smoothly. However, enabling this feature may cause lags on devices with low performance.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can change the value of the scrolling | preloadEnabled option at runtime using the check box under the grid. Scroll grid records to spot the difference between the enabled and disabled page preloading. Data for this example is obtained from www.odata.org.

    <div ng-controller="demoController" style="text-align:center; height:390px; max-width:630px; margin: 0 auto">
        <div style="height:360px" dx-data-grid="{
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            columns: columns,
            scrolling: {
                mode: 'virtual',
                preloadEnabled: true
            },
            bindingOptions: {
                'scrolling.preloadEnabled': 'checkBoxState'
            }
        }"></div>
        <div ng-model="checkBoxState" dx-check-box="{
            text: 'Enable Page Preloading'
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.columns = [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ];
        $scope.checkBoxState = true;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can change the value of the scrolling | preloadEnabled option at runtime using the check box under the grid. Scroll grid records to spot the difference between the enabled and disabled page preloading. Data for this example is obtained from www.odata.org.

    <div style="text-align:center; height:390px; max-width:630px; margin: 0 auto">
        <div style="height:360px" data-bind="dxDataGrid: {
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            columns: columns,
            scrolling: {
                mode: 'virtual',
                preloadEnabled: checkBoxState
            }
        }"></div>
            <div data-bind="dxCheckBox: {
            text: 'Enable Page Preloading',
            value: checkBoxState
        }"></div>
    </div>
    
    var myViewModel = {
        columns: [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ],
        checkBoxState: ko.observable(true)
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can change the value of the scrolling | preloadEnabled option at runtime using the check box under the grid. Scroll grid records to spot the difference between the enabled and disabled page preloading. Data for this example is obtained from www.odata.org.

    <div style="text-align:center; height:390px; max-width:630px; margin: 0 auto">
        <div id="gridContainer" style="height:360px;"></div>
        <div id="enablePreloadCheckbox"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            columns: [
                { dataField: 'OrderID', width: 90 },
                { dataField: 'ShipName', caption: 'Name', width: 190 },
                { dataField: 'ShipCity', caption: 'City' },
                { dataField: 'ShipCountry', caption: 'Country' },
                'OrderDate',
                'RequiredDate'
            ],
            scrolling: {
                mode: 'virtual',
                preloadEnabled: true
            }
        });
    
        $("#enablePreloadCheckbox").dxCheckBox({
            text: 'Enable Page Preloading',
            value: true,
            onValueChanged: function (e) {
                $('#gridContainer').dxDataGrid('instance').option("scrolling.preloadEnabled", e.value);
            }
        });
    });
    

    scrollByContent

    Specifies whether or not the scrolling by content is enabled.

    Type: Boolean
    Default Value: true

    This feature is available only when native scrolling is disabled.

    scrollByThumb

    Specifies whether or not the scrollbar thumb scrolling enabled.

    Type: Boolean
    Default Value: false

    The scrollbar thumb is available only when native scrolling is disabled.

    showScrollbar

    Specifies the scrollbar display policy.

    Type: String
    Default Value: 'onScroll'
    Accepted Values: 'onScroll' | 'onHover' | 'always' | 'never'

    useNative

    Specifies whether or not the widget uses native scrolling.

    Type: String|Boolean
    Default Value: 'auto'