Move to Next (Previous) Page on Scrollbar Down (Up)

Environment

Product

Progress® Telerik® Reporting

HTML5 Report Viewer and all its wrappers

Description

The Html5 Report Viewer scrolls through the report and moves to the next pages when reaching the page end in CONTINUOUS_SCROLL page mode. If you would like to switch to the next page with the Scrollbar also in SINGLE_PAGE mode, you may follow the next approach.

Suggested Workarounds

You may use the dedicated commands of the viewer goToPrevPage and goToNextPage for switching between the pages - see the viewer commands.

Note that the viewer's scroll is on the element with CSS class trv-page-container.

You need to be sure that the reportViewer has already been created and the report document rendered so that the element with CSS class trv-page-container exists. For example, you may attach an event handler for the 'scroll' event to this element in the renderingEnd event of the viewer. Here is the sample implementation of the event handler:

function onRenderingEnd(e, args) {
   var changedPage = false;
    $('.trv-page-container').scroll(function (e) {
        var elem = $(e.currentTarget);
        if (elem[0].scrollHeight - elem.scrollTop() - elem.outerHeight() < 1) {
            var rv = $("#reportViewer1").data("telerik_ReportViewer");
            rv.commands.goToNextPage.exec();
            changedPage = true;
        } else {
            if (!changedPage && elem.scrollTop() === 0) {
                var rv = $("#reportViewer1").data("telerik_ReportViewer");
                if (rv.currentPage() > 1) {
                    rv.commands.goToPrevPage.exec();
                }
            }
            changedPage = false;
        }
    })
}

See Also

The Stackoverflow thread How to check if a DIV is scrolled all the way to the bottom with jQuery explains how to detect when the DIV is scrolled to the bottom.