Scrolling

Scrolling allows browsing data outside the widget's viewport. The following scrolling modes are available in the DataGrid:

  • Standard
    Loads all rows simultaneously. A user scrolls within one page if paging is enabled.

  • Virtual
    Pages are loaded when entering the viewport and removed once they leave. This mode allows users to scroll data by jumping swiftly from one row to another. Scrolling in this mode becomes smoother if the widget preloads the adjacent pages. You can enable this feature by setting the scrolling.preloadEnabled option to true, but note that it may cause lags on low-performing devices.

    Virtual Scrolling Demo

  • Infinite
    The next page is loaded once the scrollbar reaches the end of its scale. Use this mode if a user should scroll data gradually, from the first to the last page.

    Infinite Scrolling Demo

Use the scrolling.mode option to specify the current scrolling mode.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        scrolling: {
            mode: "standard" // or "virtual" | "infinite"
        }
    });
});
Angular
HTML
<dx-data-grid ... >
    <dxo-scrolling
        mode="standard"> <!-- or "virtual" | "infinite" -->
    </dxo-scrolling>
</dx-data-grid>

The DataGrid adapts its scrolling mechanism to the current platform. It utilizes native scrolling on most platforms, except non-Mac desktops and Android 4.0 below devices, where the widget simulates scrolling. You can force the DataGrid to use native or simulated scrolling on all platforms by setting the useNative option.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        scrolling: {
            useNative: true // or false | "auto"
        }
    });
});
Angular
HTML
<dx-data-grid ... >
    <dxo-scrolling
        [useNative]="true"> <!-- or false | "auto" -->
    </dxo-scrolling>
</dx-data-grid>

The current platform determines the native scrolling settings and you cannot adjust them, but you can control the simulated scrolling. Particularly, you can specify whether a user scrolls the content with a swipe gesture or scrollbar by setting the scrollByContent and scrollByThumb options. The showScrollbar option specifies when the scrollbar should appear.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        scrolling: {
            useNative: false,
            scrollByContent: true,
            scrollByThumb: true,
            showScrollbar: "onHover" // or "onClick" | "always" | "never"
        }
    });
});
Angular
HTML
<dx-data-grid ... >
    <dxo-scrolling
        [useNative]="false"
        [scrollByContent]="true"
        [scrollByThumb]="true"
        showScrollbar="onHover"> <!-- or "onClick" | "always" | "never" -->
    </dxo-scrolling>
</dx-data-grid>
See Also