ReportViewer Control - Height issue

2019-03-08 19:55发布

站内文章 / 前端开发
27 0 0

问题:

In my asp.net application, I am trying to open a particular report. I have the ReportViewer Control set with width of 100% and height of 100%. Now I expect that to mean that the report will take up the entire page. Well to my surprise, it does not. In IE7 while it takes the entire width of the page, it only takes up a small portion of the height. In Firefox, both the width and the height are messed up. I have the browser open up a new page that takes up almost all of the screen. Any ideas?

Thanks!

回答1:

Give it a static height that is enough for the entire height of the report. As far as I know 100% will not work because the ReportViewer control is essentially wrapped by one big div tag.



回答2:

This is the way I fixed, take a look

<div style="Width:auto;"> 
<form id="form1" runat="server" style="width:100%; height:100%;">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <rsweb:ReportViewer ID="rptViewer" runat="server" Width="100%" Height="100%" AsyncRendering="False" SizeToReportContent="True">
    </rsweb:ReportViewer>
</form></div>

The thing doing the magic is AsyncRendering="False" SizeToReportContent="True" the rest is basic HTML. The report will be displayed as it was designed.

There might be some code extra, but see if it works for you.

Hope it helps



回答3:

this is the way i fixed it, setting the height dynamically using javascript, it works with both IE and Firefox. also works with reports larger than the maximum window size.

<rsweb:ReportViewer ID="ReportViewer1" runat="server" Width="100%" ShowBackButton="True" ProcessingMode="Remote" />

<script language="javascript" type="text/javascript">
    ResizeReport();

    function ResizeReport() {
        var viewer = document.getElementById("<%= ReportViewer1.ClientID %>");
        var htmlheight = document.documentElement.clientHeight;
        viewer.style.height = (htmlheight - 30) + "px";
    }

    window.onresize = function resize() { ResizeReport(); }
</script>


回答4:

I had the same problem with ReportViewer 11.0 and what did the trick for me was to set 

Height="100%" 
SizeToReportContent="true"

while keeping 

AsyncRendering="true"

Eg

<rsweb:ReportViewer ID="reportControl" runat="server" Width="750" Height="100%" AsyncRendering="true" SizeToReportContent="true">

This actually generated a table with height="100%" for the control.



回答5:

This is an issue with XHTML 1.1 standard. Change your page doctype to transitional to get 100% height working:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>

Or if you still struggle, remove it completely.



回答6:

I know this is an old question, but I still struggled with this one recently. It appears the following works well in all modern browsers (only tested IE8/9, Firefox, and Chrome). The kickers for me were doctype and html element height.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html, body, form { width: 100%; height: 100%; margin: 0; padding: 0 }
    </style>
</head>
<body>
  <form runat="server">
    <asp:scriptmanager runat="server" />
    <rsweb:ReportViewer ID="ReportViewerControl" Width="100%" Height="100%" runat="server" />
  </form>
</body>
</html>


回答7:

Dan, here is what we ended up doing with a little jQuery magic.

All reports used the same Report.Master as the master page:

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Report.master.vb" Inherits=".Report" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
     <style type="text/css">
        html, body
        {
            margin: 0;
            padding: 0;            
            border: none;
            background-color: #FFFFFF;     
            overflow: hidden;       
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            setWindowSize();
        });

        $(window).resize(function () {
            setWindowSize();
        });

        function setWindowSize() {
            // http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
            var myWidth = 0, myHeight = 0;
            if (typeof (window.innerWidth) == 'number') {
                //Non-IE
                myWidth = window.innerWidth;
                myHeight = window.innerHeight;
            } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth;
                myHeight = document.documentElement.clientHeight;
            } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                //IE 4 compatible
                myWidth = document.body.clientWidth;
                myHeight = document.body.clientHeight;
            }

            var r = $('div[id*="_report_"]:first');
            r.width(myWidth);
            r.height(myHeight - 32);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">    
        <asp:ScriptManager ID="rptScriptManager1" runat="server" />
        <asp:ContentPlaceHolder ID="report" runat="server"/>                
    </form>
</body>
</html>

Then, each report page contained the ReportViewer and it's properties.

<%@ Page Title="This Cool Report" MasterPageFile="~/masterpages/Report.Master" Language="vb" AutoEventWireup="false" CodeBehind="viewmycoolreport.aspx.vb" Inherits=".viewmycoolreport" %>
<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

<asp:Content ID="reportContent" ContentPlaceHolderID="report" runat="server">    
    <rsweb:ReportViewer ID="rptCoolReport" runat="server" Width="100%" ProcessingMode="Remote" SizeToReportContent="True" />
</asp:Content>

Now, when the report loads, the ReportViewer control ends up sizing itself to the size of the content window both on ready and resizing the window. The jQuery selector grabs the first div with an ID that contains "_report_" (since the ReportViewer control renders with a client id of ctl_report_<report_id>). The height ends up having to be less 32 pixels because of the header in the ReportViewer control (for paging, exporting, etc).



回答8:

The following options will fix your SSRS Report loading problem in ASP.NET page.

And there is a fantastic property called ZoomMode="PageWidth" that will fix your report into full page. you also can use ZoomMode="FullPage" or ZoomMode="Percent". All those property will fix your page loading issue in ASP.NET page.

<rsweb:ReportViewer ID="ReportViewer1" runat="server" Height="100%" Width="100%" ZoomMode="Percent"></rsweb:ReportViewer>


回答9:

I recently sat down and fought the ReportViewer control to expand to the height of the report content while still allowing .AsyncRendering = true. Here's what I did, which requires jQuery, and has only been tested with Report Viewer 2008 (9.0.0.0).

<script type="text/javascript">

    $(function() {

        $('#<%= uxReportViewer.ClientID %> > iframe:eq(0)').bind('load', function() {
            ReportViewerResize(this);
        });

    });

    function ReportViewerResize(frame) {
        var container = $('#<%= uxReportViewer.ClientID %>');
        try {
            var reportFrame = $(frame).contents().find('html')[0].document.frames["report"].document;
            var reportHeight = $('div#oReportDiv > table > tbody > tr > td#oReportCell', reportFrame).height();
            $(container).css({ height: '' + (reportHeight + 10) + 'px' });
        } catch (e) { }
    }

</script>


回答10:

This code is a bit longer, but it works in all browsers i've tested with and without async-rendering. The best part is in non-async mode, it expands to the size of the report contents. In async mode, it expands to the size of the page (minus the offset from the top). I should point out, this is specific to VS2010 version of reportviewer.

<script type="text/javascript">
function ResizeReport(reportId){
        var rep = document.getElementById(reportId);
        var j = 0;

        for (var i = 0; i < rep.childNodes.length; i++) {
            var child = rep.childNodes[i];
            if (child.nodeName == "DIV") {
                j++;
                if (j == 2) {
                    child.firstChild.style.overflow = "";
                    while (child.nodeName == "DIV") {
                        child = child.firstChild;
                    }
                    child.style.width = "1px";
                    rep.style.width = (child.clientWidth) + "px";
                    rep.style.height = "";
                    return;
                }
            }
        }

        if (rep.style.height != '400px') // default value //
            return;
        ResizeReportHeight(reportId);
        window.onresize = function () { ResizeReportHeight(reportId); }
    }

    // Used to resize an async-report. Hand edit as needed.
    function ResizeReportHeight(reportId, offsetFromBot) {
        var rep = document.getElementById(reportId);
        var iFrame = rep.getElementsByTagName('iframe')[0];
        var htmlHeight = document.documentElement.clientHeight;
        var offTop = 0;
        var obj = iFrame;
        while (obj) {
            offTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        var newHeight = (htmlHeight - offTop)
        if (offsetFromBot)
            newHeight -= offsetFromBot;
        if (newHeight < 1)
            newHeight = 1;
        rep.style.height = "";
        iFrame.style.height =  newHeight + "px";
    }
</script>
<script type="text/javascript">
    window.onload = function () { ResizeReport("<%= reportviewer1.ClientID %>"); }
</script>
<rsweb:reportviewer ID="reportviewer1" runat="server" ProcessingMode="Remote" Width="100%" />


回答11:

As to what I have experienced, the report viewer control renders by default with a height of 400px if SizeToReportContent is set to false.
If you want a dynamic height, you need to add a css class to the report viewer and the following css:

#reportViewerContainer > span
{
    display:block;
    height:100% !important;
}

.reportViewer
{
    height:100% !important;
}

"reportViewerContainer" is the parent container of the report viewer (a div, body etc.). The viewer renders as a span with height: 0 and inside is all the content. If you change this, everything should work fine.



回答12:

This is how I fixed my problem for the height... No as elegant as I wish but It work.

function ResizeReport() {
    var htmlheight = document.documentElement.clientHeight - 110;
    var reportViewer = $('div[id^=VisibleReportContent<%= this.bddr_report.ClientID %>]').parent();
    reportViewer.css('height',htmlheight+'px');
}


回答13:

This is the solution to fix it, setting the height dynamically using javascript, it works with both IE and Firefox.

<script type="text/javascript">
var ReportViewerForMvc = ReportViewerForMvc || (new function () {

    var _iframeId = {};

    var resizeIframe = function (msg) {
        var height = 360;//here you specify the height if you want to put in 
                        // percent specify value in string like "100%"
        var width = 1255;// follow above

        $(ReportViewerForMvc.getIframeId()).height(height);
        $(ReportViewerForMvc.getIframeId()).width(width);
    }

    var addEvent = function (element, eventName, eventHandler) {
        if (element.addEventListener) {
            element.addEventListener(eventName, eventHandler);
        } else if (element.attachEvent) {
            element.attachEvent('on' + eventName, eventHandler);
        }
    }

    this.setIframeId = function (value) {
        _iframeId = '#' + value;
    };

    this.getIframeId = function () {
        return _iframeId;
    };

    this.setAutoSize = function () {
        addEvent(window, 'message', resizeIframe);
    }

}());

ReportViewerForMvc.setAutoSize();
</script>

  • Please don't change the following code of ".aspx"

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
  <asp:ScriptReference  Assembly="ReportViewerForMvc"          Name="ReportViewerForMvc.Scripts.PostMessage.js" />
   </Scripts>
</asp:ScriptManager>

Here we are replacing the ReportViewerForMvc.Scripts.PostMessage.js explicitly with our own resizeIframe where we specifying width



标签： asp.net reporting-services reportviewer
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~