New to Telerik Reporting? Download free 30-day trial

Replace report on export in the Html5 Viewer

Environment

Product Progress® Telerik® Reporting

Description

In some cases, the report needs to be previewed with one layout in the viewer and exported (or printed) with a (slightly) different layout.

Solution

This may be achieved by creating two report definitions for the same report and changing the report to be rendered when exporting (or printing). You may do this by handling the exportBegin event (or printBegin event). It will be necessary to set the args.handled to true and to use another (hidden) report viewer from where to export (or print). Here is sample code of the page that hosts the viewers (for export only) :


<head>
    ... 
    <style>
    ...
    #reportViewer1 {
            ...
        }

        #reportViewer2 {
            position: absolute;
            overflow: hidden;
            clear: both;
            display: none;
        }
    </style>
</head>
<body>
    <div id="reportViewer1">
        loading...
    </div>

    <div id="reportViewer2">
    </div>

   <script type="text/javascript">
        $(document).ready(function () {

            var exportReportViewerInstance;
            var format = "PDF";

            function onExportBegin(e, args) {
                    args.handled = true;
                    exportReport("Barcodes Report.trdp", args.format);
            }

            function exportReport(reportName, exportFormat) {
                    format = exportFormat;

                    if (!exportReportViewerInstance) {
                        exportReportViewerInstance = $("#reportViewer2").telerik_ReportViewer({
                                serviceUrl: "api/reports",
                                reportSource: {
                                        report: reportName
                                },
                                renderingEnd: function (e, args) {
                                        e.target.commands.export.exec(format);
                                }
                            }).data("telerik_ReportViewer");

                    } else {
                        exportReportViewerInstance.reportSource({
                                report: reportName
                        });
                    }
            }

        $("#reportViewer1")
                    .telerik_ReportViewer({
                    serviceUrl: "/api/reports",
                exportBegin: onExportBegin,
                ...
                })
    })
    </script>
</body>

Briefly, on the ExportBegin event of the main viewer reportViewer1, the export is cancelled (i.e. args.handled set to true) and a custom export method is called. The latter configures the second viewer reportViewer2 with the same service and the required export report. The export command of the second viewer is triggered on the renderingEnd event of the second viewer. If reportViewer2 already exists, only the name of the report is changed. The export format is taken from the original export. Note that the reportViewer2 style display is set to none.

In this article