Fit print preview to viewer size (html)

[Chris]

Hi,
             I know that Zoom Mode and Zoom Percent are now obsolete and  only worked on IE but I am trying to find a way around this situation that I have.

I have a multi column report that has to be displayed in print preview mode so that the columns render correctly (known limitation of Web Viewer). The problem is that this is an A4 landscape report and my site has to have a fixed width that is less than the print preview width for the report. 

This means that the print preview has to be scrolled horizontally to view the whole report which is less than ideal.

Is there any way to fit the print preview to the viewer size?

Thanks

Chris

[Chris]

Hi,
         I have made some progress by fiddling with the html content of the report viewer iFrame to work out if a cross browser zoom is possible. I have found that most of the modern browsers support transformations. I initially tried to apply the transforms to the ifram but this scaled all of the controls as well. So using Fire-bug I had a look at the returned html and I have found a way to zoom the report pages using just CSS.

I applied the following to the body.print-page css in the html content of the iframe.

body.print-page
{
       -webkit-transform: scale(0.85);  /* Saf3.1+, Chrome */
             -moz-transform: scale(0.85);  /* FF3.5+ */
              -ms-transform: scale(0.85);  /* IE9 */
               -o-transform: scale(0.85);  /* Opera 10.5+ */
                  transform: scale(0.85);
        margin: -50px -73px 0;  /* big hack to reposition the page top the top and left of the viewer control */
}

The margin would have to be calculated some way to get it to look good but this seems to work nicely. I don't think I can change the css in the iframe content dynamically as there are security implications.

I would love it if you could add something to the request to allow a scale factor to be passed into to the report viewer. I ahve attached a screen shot of the zoomed report in Firefox.

Thanks

Chris

[Chris]

Hi,
     I got the zoom working :)  This is what I did.

1. Create a css file with your styles in it.
2. use JQuery to get the contents of the reportviewer iframe - this is OK as it is not cross domain and so there are no security issues (in FireFox at least).
3. Append a new css link to the head section of the iframe content.
4. Append the zoom class to the iframe content body.

Here is my code, it runs from a button right now and does not calculate the margins for different zoom sizes but it is a start.

HTML

<input type="button" value="Zoom Me" onclick="ZoomIt();"/>
    <telerik:RadDatePicker ID="dpTTDay" runat="server" AutoPostBack="True" OnSelectedDateChanged="dpTTDay_SelectedDateChanged"></telerik:RadDatePicker>
    <br/>
    <telerik:ReportViewer ID="rvTT" runat="server" BackColor="White" Height="900px"
        ParametersAreaVisible="False" ShowDocumentMapButton="False"
        ShowHistoryButtons="False"
        ShowParametersButton="False" ShowPrintPreviewButton="True"
        ShowRefreshButton="False"  Width="984px"
        Skin="WebBlue" ViewMode="PrintPreview"  ZoomMode="PageWidth" >
    </telerik:ReportViewer>

    <script>
        function ZoomIt() {
            var $frameContents = $("[id$='rvTTReportFrame']").contents();

            var $head = $frameContents.find("head");
            var $headlinklast = $head.find("link[rel='stylesheet']:last");
            var linkElement = "<link rel='stylesheet' href='/Styles/RptZoom.css' type='text/css' media='screen'>";
            if ($headlinklast.length) {
                $headlinklast.after(linkElement);
            }
            else {
                $head.append(linkElement);
            }

            var $body = $frameContents.find('body');

            $body.addClass("zoomtofit");
        }
    </script>

CSS

.zoomtofit {
          -webkit-transform: scale(0.85);  /* Saf3.1+, Chrome */
          -moz-transform: scale(0.85);  /* FF3.5+ */
          -ms-transform: scale(0.85);  /* IE9 */
          -o-transform: scale(0.85);  /* Opera 10.5+ */
          transform: scale(0.85);
          margin: -50px -73px 0;
      }

The JQuery came from a Stack overflow article here.

I hope something like this can make it into the Report Viewer soon as the Zoom functions are very much missed.

Thanks

Chris

[Chris]

Last bit of the puzzle, resize on load and then on page naviagte. I was hunting round and found a reference to some undocumented events on ReportViewer.prototype.

This is the final js that seems to work happily in FireFox. I have't tested in other browsers yet and I haven't check to see if print size is affected.

<script>

        ReportViewer.OnReportLoadedOld = ReportViewer.OnReportLoaded;
        ReportViewer.prototype.OnReportLoaded = function () {
            this.OnReportLoadedOld();
            ZoomIt();
        };

        $(window).bind("load", function () {
            ZoomIt();
        });

        function ZoomIt() {

            var $frameContents = $("[id$='rvTTReportFrame']").contents();

            var $head = $frameContents.find("head");
            var $headlinklast = $head.find("link[rel='stylesheet']:last");
            var linkElement = "<link rel='stylesheet' href='/Styles/RptZoom.css' type='text/css' media='screen'>";
            if ($headlinklast.length) {
                $headlinklast.after(linkElement);
            }
            else {
                $head.append(linkElement);
            }

            var $body = $frameContents.find('body');

            $body.addClass("zoomtofit");
        }
    </script>

Hope this helps you all.

Chris

Edit:
           Chrome and IE (7-10) works and print size appears unaffected.

[IvanY]

Hi Chris,

Thank you for the provided information regarding your investigation and development of the zoom feature in the ASP.NET report viewer. As a token of gratitude we have updated your Telerik points.

Greetings,
IvanY
the Telerik team