web-dev-qa-db-fra.com

ReportViewer Control - Problème de hauteur

Dans mon application asp.net, j'essaie d'ouvrir un rapport particulier. J'ai le contrôle ReportViewer défini avec une largeur de 100% et une hauteur de 100%. Maintenant, je suppose que cela signifie que le rapport occupera toute la page. Eh bien, à ma grande surprise, ce n'est pas le cas. Dans IE7, la largeur de la page occupe toute la largeur de la page. Dans Firefox, la largeur et la hauteur sont modifiées. J'ai le navigateur ouvrir une nouvelle page qui occupe presque tout l'écran. Des idées?

Merci!

asp.netreporting-servicesreportviewer
27
Dan Appleyard

Donnez-lui une hauteur statique suffisante pour toute la hauteur du rapport. Autant que je sache, 100% ne fonctionnera pas car le contrôle ReportViewer est essentiellement entouré d'une grande balise div.

8
mccrager

C'est la façon dont j'ai fixé, jetez un oeil

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

La chose qui fait la magie est AsyncRendering = "False" SizeToReportContent = "True" le reste est HTML de base. Le rapport sera affiché tel qu'il a été conçu.

Il pourrait y avoir du code en plus, mais voyez si cela fonctionne pour vous. 

J'espère que ça aide

64
Sanchitos

c'est comme cela que je l'ai corrigé, en réglant la hauteur de manière dynamique en utilisant javascript, cela fonctionne à la fois avec IE et Firefox. fonctionne également avec des rapports plus grands que la taille maximale de la fenêtre.

<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

J'avais le même problème avec ReportViewer 11.0 et le truc pour moi était de définir 

Height="100%" 
SizeToReportContent="true"

while keeping 

AsyncRendering="true"

Par exemple

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

Cela a en fait généré une table avec height = "100%" pour le contrôle.

9
Ovidiu

Les options suivantes résoudront le problème de chargement du rapport SSRS dans la page ASP.NET.  

Et il existe une propriété fantastique appelée ZoomMode = "PageWidth" qui fixera votre rapport en pleine page. vous pouvez également utiliser ZoomMode = "FullPage" ou ZoomMode = "Pourcent" . Toutes ces propriétés vont résoudre votre problème de chargement de page dans la page ASP.NET.

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

Dan, voici ce que nous avons fait avec un peu de magie jQuery. 

Tous les rapports utilisaient le même Report.Master que la page maître:

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

Ensuite, chaque page de rapport contenait le ReportViewer et ses propriétés.

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

Maintenant, lorsque le rapport est chargé, le contrôle ReportViewer se redimensionne lui-même à la taille de la fenêtre de contenu à la fois prête et en redimensionnant la fenêtre. Le sélecteur jQuery saisit la première div avec un ID contenant "_report_" (puisque le contrôle ReportViewer est rendu avec un ID client de ctl_report_ <rapport_id> ). La hauteur finit par être inférieure à 32 pixels à cause de l'en-tête du contrôle ReportViewer (pour la pagination, l'exportation, etc.).

3
Steve Wright

Ceci est un problème avec le standard XHTML 1.1. Changez votre doctype de page en transitionnel pour obtenir 100% de hauteur de travail:

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

Ou si vous avez encore du mal, supprimez-le complètement.

3
Mark Cooper

Je sais que c’est une vieille question, mais j’ai encore eu du mal avec celle-ci récemment. Il semble que ce qui suit fonctionne bien dans tous les navigateurs modernes (uniquement testé IE8/9, Firefox et Chrome). Les kickers pour moi étaient doctype et 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>
3
jamisonLikeCode

Récemment, je me suis assis et je me suis battu avec le contrôle ReportViewer pour atteindre la hauteur du contenu du rapport tout en permettant à .AsyncRendering = true. Voici ce que j'ai fait, qui nécessite jQuery et n'a été testé qu'avec 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ᴏʀʏ

Ce code est un peu plus long, mais il fonctionne dans tous les navigateurs que j'ai testés avec et sans rendu asynchrone. La meilleure partie est en mode non asynchrone, elle s’étend à la taille du contenu du rapport. En mode async, il s'agrandit à la taille de la page (moins le décalage par rapport au haut). Je dois souligner que ceci est spécifique à la version VS2010 de 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%" />
2
Theodosius

C'est la solution pour y remédier, en réglant la hauteur de manière dynamique en utilisant javascript, cela fonctionne à la fois avec IE et 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>

  • S'il vous plaît ne changez pas le code suivant de ".aspx"

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

Ici, nous remplaçons le ReportViewerForMvc.Scripts.PostMessage.js explicitement avec notre propre resizeIframe où nous spécifions width 

0
Mandar Khutwad

C’est ainsi que j’ai réglé mon problème pour la hauteur ... Non aussi élégante que je le souhaite mais ça marche.

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

En ce qui concerne ce que j'ai expérimenté, le contrôle de la visionneuse de rapports affiche par défaut une hauteur de 400 pixels si SizeToReportContent est défini sur false. 
Si vous voulez une hauteur dynamique, vous devez ajouter une classe CSS à la visionneuse de rapports et le CSS suivant:

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

.reportViewer
{
    height:100% !important;
}

"reportViewerContainer" est le conteneur parent de la visionneuse de rapport (un div, un corps, etc.). Le visualiseur s'affiche sous forme d'étendue avec la hauteur: 0 et l'intégralité du contenu. Si vous changez cela, tout devrait bien fonctionner.

0
AGuyCalledGerald