Progress® Telerik® Reporting R3 2019

How To: Show the Page Scroll Mode Button

This topic explains how to show the page scroll mode button in the HTML5 Viewer Toolbar Area

There are a few steps that should be done.

All path references in the article should be adapted according to your project setup. For more information please refer to the MSDN article ASP.NET Web Project Paths

The mentioned Report Viewer Template files are provided with your Telerik Reporting Installation - Installation Directories.

Step 1:

Find Telerik Report Viewer template in your installation folder located in:

%programfiles(x86)%\Progress\Telerik Reporting R3 2019\Html5\ReportViewer\templates

Copy the template in your application folder

  • telerikReportViewerTemplate.html- if you use the default template

  • telerikReportViewerTemplate-FA.html- if you use Font Awesome template

Step 2:

Specify and resolve the templateUrl path of the HTML5 Viewer widget option to the copied template.

Step 3:

Add buttons elements in your local template. There are two different elements that have to be added.

  • For desktop screens.

    Copy the following element in the ul element with id attribute trv-main-menu-ul

    • For default template

      HTML
      <li aria-label="ariaLabelMenuContinuousScroll"><a data-command="telerik_ReportViewer_pageMode" title="menuContinuousScrollTitle" href="#"><i class="t-font-icon t-i-scroll"></i></a></li>
    • For Font Awesome template

      HTML
      <li aria-label="ariaLabelMenuContinuousScroll"><a data-command="telerik_ReportViewer_pageMode" title="menuContinuousScrollTitle" href="#"><i class="fa fa-angle-double-down icon-angle-double-down"></i></a></li>
  • For mobile screens

    Copy the following element in ul element with id attribute trv-side-menu-ul

    • For default template

      HTML
      <li aria-label="ariaLabelMenuContinuousScroll"><a data-command="telerik_ReportViewer_pageMode" title="menuContinuousScrollTitle" href="#"><i class="t-font-icon t-i-scroll"></i><span>menuContinuousScrollText</span></a></li>
    • For Font Awesome template

      HTML
      <li aria-label="ariaLabelMenuContinuousScroll"><a data-command="telerik_ReportViewer_pageMode" title="menuContinuousScrollTitle" href="#"><i class="fa fa-angle-double-down icon-angle-double-down"></i><span>menuContinuousScrollText</span></a></li>

See Also

Other Resources

In this article
Not finding the help you need?