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.