CODEWITHSUNDEEP
asp.net-mvcreportviewerssrs-2008-r2
sawe
sawe

Reputation: 1151

SSRS Reportviewer in MVC, removing iframe scrollbars by auto-sizing iframe to fit report

I have pieced together information on eliminating iframe scrollbars in favour of the browser scroll bars when rendering a reportviewer in an iframe. MVC does not support rendering a report viewer in a view, hence the need for an iframe.

Edit: i struggled to find this solution (below) hence i thought i would share.

In the aspx page (the page that will be rendered in the iframe)

$(function () {//jQuery document.ready
    // attach an event handler, whenever a 'property' of the reportviewer changes, the function will be called to adjust the height of the iframe
    Sys.Application.add_load(function () {
        $find("ReportViewer").add_propertyChanged(viewerPropertyChanged); // $.find("ReportViewer") will return the reportviewer with id "ReportViewer"
    });

    function adjustIframeSize() {
        // you can play around with these figures until your report is perfect
        var extraHeightToAvoidCuttingOffPartOfReport = 100;
        var extraWidthToAvoidCuttingOffPartOfReport = 10;

        // '#ReportViewer_fixedTable' is a portion of the report viewer that contains the actual report, minus the parameters etc
        var reportPage =  $('#ReportViewer_fixedTable');

        // get the height of the report. '#ParametersRowReportViewer' is that top part that contains parameters etc
        var newHeight = reportPage.height() + $('#ParametersRowReportViewer').height() + extraHeightToAvoidCuttingOffPartOfReport;

        // same for width
        var newWidth = reportPage.width() + extraWidthToAvoidCuttingOffPartOfReport;

        // get iframe from parent document, the rest of this function only works if both the iframe and the parent page are on the same domain    
        var reportIframe = $('#ReportViewerFrame', parent.document);

        // just make sure that nothing went wrong with the calculations, other wise the entire report could be given a very small value for height and width, thereby hiding the report
        if(newHeight>extraHeightToAvoidCuttingOffPartOfReport)
            reportIframe.height(newHeight);
        if (newWidth > extraWidthToAvoidCuttingOffPartOfReport)
            reportIframe.width(newWidth);
    }

    function viewerPropertyChanged(sender, e) {
        // only change the iframe dimensions when 'isLoading'
        if (e.get_propertyName() == "isLoading") {
            if (!$find("ReportViewer").get_isLoading()) {
                adjustIframeSize();
            }
        }
    };
});

Upvotes: 4

Views: 3646

Answers (1)

celerno
celerno

Reputation: 1387

Solved a similar problem using a set of extensions in ReportViewer for MVC. 

@Html.ReportViewer(
   ViewBag.ReportViewer as Microsoft.Reporting.WebForms.ReportViewer, 
   new { scrolling = "no" })

Upvotes: 1

Related Questions