ReportViewer Control - Height issue

后端未结

关注

 13  952

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 t

相关标签:

13条回答

臣服心动

2021-01-31 09:41

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');
}

0 讨论(0)

不思量自难忘°

2021-01-31 09:43

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

0 讨论(0)

春和景丽

2021-01-31 09:45

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%" />

0 讨论(0)

情话喂你

2021-01-31 09:49

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>

0 讨论(0)

旧巷少年郎

2021-01-31 09:49

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).

0 讨论(0)

陌清茗

2021-01-31 09:52

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...