web-dev-qa-db-ja.com

ReportViewerコントロール-高さの問題

Asp.netアプリケーションで、特定のレポートを開こうとしています。 ReportViewerコントロールを幅100％、高さ100％に設定しています。これで、レポートがページ全体を占めることになると思います。驚いたことに、そうではありません。 IE7では、ページの幅全体を使用しますが、高さのごく一部しか使用しません。 Firefoxでは、幅と高さの両方が台無しになります。ブラウザーで、ほとんどすべての画面を占める新しいページを開きます。何か案は？

ありがとう！

asp.netreporting-servicesreportviewer
30
Dan Appleyard

レポートの高さ全体に十分な静的な高さを指定します。 ReportViewerコントロールは本質的に1つの大きなdivタグでラップされているため、100％は機能しません。

8
mccrager

これは私が修正した方法です、見てみましょう

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

魔法をやっているのはAsyncRendering = "False" SizeToReportContent = "True"残りは基本的なHTMLです。レポートは、設計どおりに表示されます。

余分なコードが存在する可能性がありますが、それが機能するかどうかを確認してください。

それが役に立てば幸い

67
Sanchitos

これは私が修正した方法で、javascriptを使用して高さを動的に設定し、IEとFirefox。最大ウィンドウサイズより大きいレポートでも動作します。

<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>
11
Ghulam Murtaza

ReportViewer 11.0で同じ問題が発生しましたが、私にとってのトリックは設定することでした

Height="100%" 
SizeToReportContent="true"

while keeping 

AsyncRendering="true"

例えば

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

これにより、コントロールに対してheight = "100％"のテーブルが実際に生成されました。

9
Ovidiu

これは古い質問であることは知っていますが、最近この問題に苦労しました。以下は、最新のすべてのブラウザー（IE8/9、Firefox、Chromeのみでテスト済み）でうまく機能しているようです。私にとってのキッカーは、doctypeとhtml要素の高さでした。

<!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>
4
jamisonLikeCode

次のオプションは、ASP.NETページでのSSRSレポートの読み込みの問題を修正します。

また、レポートをページ全体に修正するZoomMode = "PageWidth"という素晴らしいプロパティがあります。 ZoomMode = "FullPage"またはZoomMode = "Percent"を使用することもできます。これらのプロパティはすべて、ASP.NETページのページ読み込みの問題を修正します。

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

ダン、これが小さなjQueryマジックで私たちがやったことです。

すべてのレポートは、マスターページと同じReport.Masterを使用しました。

<%@ 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>

次に、各レポートページにはReportViewerとそのプロパティが含まれていました。

<%@ 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>

これで、レポートが読み込まれると、ReportViewerコントロールは、ウィンドウの準備とサイズ変更の両方で、コンテンツウィンドウのサイズに自身のサイズを変更します。 jQueryセレクターは、「_ report_」を含むIDを持つ最初のdivを取得します（ReportViewerコントロールはctl_report_ <report_id>のクライアントIDでレンダリングするため）。 ReportViewerコントロールのヘッダー（ページング、エクスポートなど）のため、高さは32ピクセル未満にする必要があります。

3
Steve Wright

これはXHTML 1.1標準の問題です。ページのdoctypeをTransitionalに変更して、100％の高さを機能させます：

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

または、まだ苦労している場合は、完全に削除します。

3
Mark Cooper

私は最近座ってReportViewerコントロールと戦い、レポートコンテンツの高さまで拡張しながら、.AsyncRendering = true。これが私がしたことで、jQueryが必要で、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>
2
Cᴏʀʏ

このコードは少し長くなりますが、非同期レンダリングの有無にかかわらずテストしたすべてのブラウザーで動作します。最良の部分は非非同期モードで、レポートコンテンツのサイズに拡大します。非同期モードでは、ページのサイズに拡張されます（上からのオフセットを差し引いたもの）。これは、reportviewerのVS2010バージョンに固有のものです。

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

これは、javascriptを使用して動的に高さを設定する、それを修正するソリューションです。IEと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>
  • 「.aspx」の次のコードを変更しないでください
<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
  <asp:ScriptReference  Assembly="ReportViewerForMvc"          Name="ReportViewerForMvc.Scripts.PostMessage.js" />
   </Scripts>
</asp:ScriptManager>

ここでは、ReportViewerForMvc.Scripts.PostMessage.jsを独自のresizeIframeに明示的に置き換えています。ここで、指定するwidth

0
Mandar Khutwad

これが私が高さの問題を修正した方法です...私が望むほどエレガントではありませんが、うまくいきます。

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

私が経験したことに関しては、SizeToReportContentがfalseに設定されている場合、レポートビューアーコントロールはデフォルトで400pxの高さでレンダリングされます。
動的な高さが必要な場合は、レポートビューアーと次のcssにcssクラスを追加する必要があります。

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

.reportViewer
{
    height:100% !important;
}

「reportViewerContainer」は、レポートビューアーの親コンテナー（div、bodyなど）です。ビューアーは、高さ0のスパンとしてレンダリングされ、内部はすべてのコンテンツです。これを変更すると、すべてが正常に機能するはずです。

0
AGuyCalledGerald