Resize the HTML5 Report Viewer to Accommodate Its Content

Environment

Product Version	13.0.19.116
Product	Progress® Telerik® Reporting
Report Viewers	HTML5 Report Viewer, HTML5 ASP.NET MVC Report Viewer, HTML5 ASP.NET Web Forms Report Viewer, Angular Report Viewer

Description

When the report page displayed in the HTML5 Report Viewer is too long, a vertical scrollbar appears inside the viewer. This behavior aids in viewer-exclusive webpages, but may not look perfect in more complex user applications which might have their own containers with scrollbars, or even a scrollbar appearing in the browser. Multiple scrollbars inside a single webpage may deteriorate the overall user experience.

Solution

The default behavior of the viewer can be changed so the viewer is resized automatically in order to accommodate the currently displayed report page. To achieve that follow these steps:

Steps for the pure HTML5 Report Viewer

1. Remove the default report viewer container styles if they are present in your application:

   #reportViewer1 {
       position: absolute;
       left: 5px;
       right: 5px;
       top: 40px;
       bottom: 5px;
       overflow: hidden;
       clear: both;
   }
   

2. Add the following styles to the page:

   #reportViewer1 {
       height: 600px;
   }
   
   #reportViewer1 .k-splitter .k-scrollable {
       overflow: hidden;
   }
   

3. Set the viewer page mode to the single page.

   $(document).ready(function () {
       $("#reportViewer1")
           .telerik_ReportViewer({
               serviceUrl: "api/reports/",
               reportSource: {
                   report: "Telerik.Reporting.Examples.CSharp.ReportCatalog, CSharp.ReportLibrary"
               },
               pageMode: telerikReportViewer.PageModes.SINGLE_PAGE,
           });
   });
   

4. Subscribe to the viewer's pageReady event and set the Viewer hight based on the report page content:

   $(document).ready(function () {
       $("#reportViewer1")
           .telerik_ReportViewer({
               serviceUrl: "api/reports/",
               reportSource: {
                   report: "Telerik.Reporting.Examples.CSharp.ReportCatalog, CSharp.ReportLibrary"
               },
               //Resize the viewer when the page is ready
               pageReady: function (e, args) {
                   resizeViewer();
               }
           });
   
       function resizeViewer() {
           var pageHeight = $(".trv-pages-area .trv-page-wrapper").height() + $(".trv-nav").outerHeight() + 2, // Calculate the report page height
               viewer = $("#reportViewer1"),
               viewerHeight = viewer.height();
   
           if (viewerHeight !== pageHeight ) {
               viewer.height(pageHeight);
               var documentMapSplitter = $(".trv-document-map-splitter").data("kendoSplitter");
               documentMapSplitter.resize(true);
   
               var parameterSplitter = $(".trv-parameters-splitter").data("kendoSplitter");
               parameterSplitter.resize(true);
           }
       }
   });
   

Steps for the MVC wrapper for HTML5 Report Viewer

1. The same as for the pure HTML5 Report Viewer
2. The same as for the pure HTML5 Report Viewer

3. Set the viewer's page mode to the single page:

   @(Html.TelerikReporting().ReportViewer()
       .Id("reportViewer1")
       //...
       .PageMode(PageMode.SinglePage)
   )
   

4. Subscribe to the viewer's pageReady event and set the viewer's height based on the report page content:

   @(Html.TelerikReporting().ReportViewer()
       .Id("reportViewer1")
       //...
       .PageMode(PageMode.SinglePage)
       .ClientEvents(
           events => events
                       .PageReady("onPageReady")
       )
   )
   

   <script type="text/javascript">
       function onPageReady() {
           resizeViewer();
       }
   
       function resizeViewer() {
           var pageHeight = $(".trv-pages-area .trv-page-wrapper").height() + $(".trv-nav").outerHeight() + 2, // Calculate the report page height
               viewer = $("#reportViewer1"),
               viewerHeight = viewer.height();
   
           if (viewerHeight !== pageHeight ) {
               viewer.height(pageHeight);
               var documentMapSplitter = $(".trv-document-map-splitter").data("kendoSplitter");
               documentMapSplitter.resize(true);
   
               var parameterSplitter = $(".trv-parameters-splitter").data("kendoSplitter");
               parameterSplitter.resize(true);
           }
       }
   </script>