Controllo ReportViewer – Altezza problema

Nel mio asp.net domanda, sto cercando di aprire un rapporto particolare. Ho il Controllo ReportViewer set con una larghezza del 100% e un’altezza di 100%. Ora mi aspetto che per dire che la relazione dovrà occupare tutta la pagina. Beh, con mia grande sorpresa, non è così. In IE7 mentre prende tutta la larghezza della pagina, si occupa solo una piccola porzione di altezza. In Firefox, sia la larghezza e l’altezza sono incasinato. Ho il browser apre una nuova pagina che occupa quasi tutto lo schermo. Tutte le idee?

Grazie!

  • Ho controllato quasi tutte le risposte, ma nessuno di loro è lavoro. Ho la soluzione, un codice server, reportview1.larghezza = 1000;
InformationsquelleAutor Dan Appleyard | 2009-04-22



13 Replies
  1. 8

    Dare una altezza statica che è sufficiente per l’intera altezza del report. Per quanto ne so al 100% non funziona, perché il controllo ReportViewer è essenzialmente avvolto da una grande div tag.

    • Ho provato l’altezza statica e sembra funzionare sia IE7 e FireFox. Grazie
  2. 67

    Questo è il modo in cui mi fisso, date un’occhiata

    <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 cosa che fa la magia è AsyncRendering=”False” SizeToReportContent=”True” il resto è HTML di base. Il report verrà visualizzato come è stata progettata.

    Ci potrebbe essere un po ‘ di codice in più, ma vedere se funziona per voi.

    Speranza che aiuta

    • Mi piace questa soluzione sembra più pulita di tutte quelle previste, ma quando provo a eseguire i report più grande di un max finestra sulla mia macchina non ho fornito alcun barre di scorrimento. Qualche consiglio su che?
    • Ho lo stesso problema con le barre di scorrimento non viene visualizzata.
    • soluzione abbastanza semplice
    • GRAZIE! Ho cercato di ottenere questo lavoro per ore.
    • Perfetto! Il mio CSS plus AsyncRendering=”False” ha fatto la magia! .)
    • Nella versione 2012, solo SizeToReportContent=”true” è necessario.
    • Tutte le idee su come è possibile nascondere standard SSRS controlli, per esempio, Salvare, pagina successiva, ecc
    • Non ho usato SSRS per un po’. Ci dispiace!
    • B e Patrick J Collins <style type="text/css"> #ctl00_MainContent_ReportViewer1_ctl09{ width:900px; overflow:auto; } </style>
    • Fantastico. Ho cercato di risolvere questo problema per un po ‘ e ora – segnala, infine, guardare bene sullo schermo. Grazie molto per la pubblicazione di informazioni. Molto apprezzata.
    • Grande uomo :)………

  3. 11

    questo è il modo in cui ho risolto, impostando l’altezza in modo dinamico utilizzando javascript, funziona con IE e Firefox. funziona anche con i rapporti che superi le dimensioni della finestra.

    <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>
    • questo è un buon tweak che ha aiutato..grazie GM!
    • Inizialmente questa soluzione ha funzionato per me, ma il rapporto ancora non mostra i dati quando c’è il report di dettaglio in esso, cioè quando ci sono link per vedere più dettagli e reindirizzare a un altro report. Qualsiasi aiuto sarebbe molto apprezzato.
  4. 9

    Ho avuto lo stesso problema con ReportViewer 11.0 e che cosa ha fatto il trucco per me è stato quello di impostare

    Height="100%" 
    SizeToReportContent="true"
    
    while keeping 
    
    AsyncRendering="true"

    Ad esempio

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

    Questo, effettivamente generata una tabella con height=”100%” per il controllo.

  5. 4

    So che questa è una vecchia questione, ma ho ancora combattuto di recente. Appare la seguente funziona bene in tutti i moderni browser (testato solo IE8/9, Firefox e Chrome). Il kicker per me sono stati doctype html e altezza elemento.

    <!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>
    • Di gran lunga la soluzione più semplice
  6. 3

    Questo è un problema di standard XHTML 1.1. Modificare la vostra pagina doctype transitorie per ottenere il 100% di altezza di lavoro:

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

    O se è ancora in lotta, rimuoverlo completamente.

    • Era uso transitorio già. Se tolgo il doctype del tutto, il problema va via in IE7, ma non in FireFox.
  7. 3

    Dan, qui è quello che abbiamo finito per fare con un po ‘ di jQuery magia.

    Tutti i report utilizzato lo stesso Rapporto.Master il 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>

    Quindi, ogni pagina del report contenute ReportViewer e proprietà.

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

    Ora, quando il report viene caricato, il controllo ReportViewer finisce dimensionamento stesso alla dimensione della finestra del contenuto sia pronto e il ridimensionamento della finestra. Il selettore di jQuery afferra il primo div con un ID che contiene “_report_” (dal momento che il controllo ReportViewer rende con un id client di ctl_report_<report_id>). L’altezza finisce per avere meno di 32 pixel a causa di intestazione nel controllo ReportViewer (per il paging, l’esportazione, ecc).

    • SizeToReportContent=”true” mi ha aiutato a ottenere quello che voglio. Non ho bisogno di utilizzare Jquery per ridimensionare ulteriormente. grazie per il suggerimento.
  8. 3

    Le seguenti opzioni risolvere il tuo Report SSRS problema di caricamento di ASP.NET pagina.

    E c’è una fantastica proprietà denominata ZoomMode=”PageWidth” che risolverà il vostro rapporto in piena pagina. è inoltre possibile utilizzare ZoomMode=”FullPage” o ZoomMode=la”Percentuale”. Tutte quelle proprietà di risolvere il tuo problema di caricamento delle pagine in ASP.NET pagina.

    <rsweb:ReportViewer ID="ReportViewer1" runat="server" Height="100%" Width="100%" ZoomMode="Percent"></rsweb:ReportViewer>
    • Questo dovrebbe essere accettato risposta.
    • Tranne che non sembrano risolvere il problema di Altezza, a tutti.
  9. 2

    Ho di recente si sedette e combattuto il ReportViewer di controllo per espandere l’altezza del contenuto del report, pur consentendo .AsyncRendering = true. Ecco quello che ho fatto, che richiede jQuery, ed è stato testato solo con il Visualizzatore di Report 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. 2

    Questo codice è un po ‘ di più, ma funziona in tutti i browser, ho provato con e senza async-rendering. La parte migliore non si trova in modalità asincrona, si espande la dimensione del contenuto del report. In modalità asincrona, si espande la dimensione della pagina (meno l’offset dall’alto). Tengo a precisare, questo è specifico per VS2010 versione di 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%" />
    • Ho ottenuto un errore con questo su IE10, ma è aiutato Chrome.
  11. 0

    Per quello che ho sperimentato, il visualizzatore di report di controllo esegue il rendering di default con un’altezza di 400px se SizeToReportContent è impostata su false.

    Se si desidera una dinamica di altezza, è necessario aggiungere una classe css per il visualizzatore di report e il seguente css:

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

    “reportViewerContainer” è il contenitore principale del visualizzatore di report (un div, corpo etc.). Lo spettatore come un arco con altezza: 0 e dentro c’è tutto il contenuto. Se si modifica questo, tutto dovrebbe funzionare bene.

  12. 0

    Questo è come ho risolto il mio problema per l’altezza… Non è elegante come vorrei ma lavoro.

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

    Questa è la soluzione per risolvere il problema, impostare l’altezza in modo dinamico utilizzando javascript, funziona con IE e Firefox.


    JS:

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

    • Si prega di non modificare il seguente codice “.aspx”

    JS:

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

    Qui stiamo sostituendo il ReportViewerForMvc.Scripts.PostMessage.js in modo esplicito con la nostra resizeIframe dove si specifica di larghezza

Lascia un commento