HTML5 ReportViewer set default page number

2 posts, 0 answers
  1. Chris
    Chris avatar
    5 posts
    Member since:
    Jul 2013

    Posted 12 Nov 2014 Link to this post

    Can there be an option to set the default page number for the HTML5 Report Viewer? (Related to my cover page question) I can get around having the cover page always been part of the report if in the Report Viewer, it shows page 2 by default (instead of Page 1).

    For now, I've changed the telerikReportViewer javascript file, but it would be good if this is possible through the API or an option etc

    Current Code (Line 1298 of telerikReportviewer-8.1.14.804.js):

    if (!navigateToPageOnDocReady) navigateToPageOnDocReady = 1;

    Changed to:

    if (!navigateToPageOnDocReady) navigateToPageOnDocReady = 2;

    Since all reports i'm viewing have a cover page, I can make this change...otherwise include the original JS, or set it to a variable/function/resolver etc.

    I've tried using the command goToPage (http://www.telerik.com/help/reporting/html5-report-viewer-reportviewer-properties-commands.html) but it wasn't working, probably because the page wasn't ready loaded yet?

    Any help, much appreciated!
  2. Stef
    Admin
    Stef avatar
    3610 posts

    Posted 17 Nov 2014 Link to this post

    Hi Chris,

    You can navigate to the second page by using the HTML5 Report Viewer API - events indicating the end of the rendering and commands for navigation. For example use the renderingEnd event and the goToPage command:
    <script type="text/javascript">
        $(document).ready(function () {
            $("#reportViewer1")
                .telerik_ReportViewer({
                    serviceUrl: "api/reports/",
                    templateUrl: 'ReportViewer/templates/telerikReportViewerTemplate-8.2.14.1107.html',
                    reportSource: {
                        report: "Telerik.Reporting.Examples.CSharp.ReportBook, CSharp.ReportLibrary",
                        parameters: {}
                    },
                    viewMode: telerikReportViewer.ViewModes.PRINT_PREVIEW,                
                    scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                    scale: 1.0,
     
                    renderingEnd: function () {
                        var rv = $("#reportViewer1").data("telerik_ReportViewer");
                        rv.commands.goToPage.exec(2);
                    }
     
                });
        });
    </script>

    ​​​Beside the renderingEnd event, you can use standard Javascript approaches to check if in the rendered HTML there is an element, which notifies you it is a good time to set the current page.


    You can also handle the export programmatically with the ReportProcessor e.g. the approach from How do I display a PDF directly in the browser without exporting first. Thus you can control what reports will be included in the ReportBook before processing it. For the purpose you will have to modify the viewer's HTML template to hide the default export menu and place your own.


    I hope the above information is helpful.

    Regards,
    Stef
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top