ReportViewer with Firefox8 and Chrome15 : The Official Microsoft ASP.NET Forums

Reply

garboy

Member

12 Points

7 Posts

ReportViewer with Firefox8 and Chrome15

Dec 12, 2011 03:42 PM|LINK

Hi all

I have an asp.net mvc3 project, it has some reports in aspx web pages. Everything works great in 2-3 weeks ago, but now, when I open the reports pages in FireFox8 and Chrome 15, the reports can not be displayed correctly.

In FF8, report content can be shown, but looks like css doesn't loaded, and report head control look like this:

In Chrome15, report head looks fine but content isn't shown up. I can see it has correct contents when using Firebug to view those <td>.

Since data can ben loaded to browser, I think it maybe a browser compatibility problem, am I right?

Does anyone seeing same issues? I'm open to any suggestions.

BTW:My report viewer's version is 10.0.0.0.

Thanks.

Reply

N_EvilScott

Star

8303 Points

1488 Posts

Re: ReportViewer with Firefox8 and Chrome15

Dec 12, 2011 05:58 PM|LINK

I cannot reproduce the issue. I tried the newest edition of firefox and Chrome vs 15.0.874.121 and it spaces out just fine. Make sure that you statically set the width and height if need be of the control.

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

Scott was here...

Reply

garboy

Member

12 Points

7 Posts

Re: ReportViewer with Firefox8 and Chrome15

Dec 21, 2011 06:08 AM|LINK

Hi Scott, thank you for your looking around this.

I have noticed when browse in firefox, server will catch an [Microsoft.Reporting.WebForms.HttpHandlerInputException: Missing URL parameter: Name], and the query string is OpType=BackImage&Version=10.0.40219.329&Color=%23ECE9D8&Name=Microsoft.Reporting.WebForms.Icons.toolbar_bk.png; path_info is Reserved.ReportViewerWebControl.axd

This may be the reason why firefox and chorme can't show page with correct CSS.

I don't know why this happens in Firefox, while in IE everything is fine.

I've found this link shows same excpetion: http://social.msdn.microsoft.com/Forums/eu/vsreportcontrols/thread/80ce3ee8-e65b-476c-b668-ecc8e83ea73d

But I'm not sure how did he solve this, can you or somebody else gives some tip or example code to solve this?

and in Chrome

When browse in chrome, I found the report data is loaded into DOM, and surronded by a <table> with id="ReportViewer1_fixedTable". Inside that <table> element, there's a div with id="ReportViewer1_ctl09" nested in <td style="vertical-align: top; height: 100%;">, if I remove the "height: 100%" from firebug, the report can be seen.

this link http://www.apptools.com/examples/tableheight.php, explained why this 100% cannot be rendered correctly, but I'm still failed when trying to give a fixed height via CSS, here's my code,

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ItemReport.aspx.cs" Inherits="IntuitChina.CommonReports.ItemReport" %>

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
    Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<html>
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .ReportViewer1_ctl09
        {
            height: 900px;
        }
        html, body
        {
            margin: 0;
            padding: 0;
            height: 1000px;
            border: none;
        }
        
        fix_height
        {
            height: 1000px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="fix_height" style="width: auto; height: 1000px">
        <rsweb:ReportViewer ID="ReportViewer1" runat="server" Font-Names="Verdana" Font-Size="8pt"
            InteractiveDeviceInfos="(Collection)" ProcessingMode="Local" WaitMessageFont-Names="Verdana"
            WaitMessageFont-Size="14pt" Height="900px" Width="800px" CssClass="fix_height">
        </rsweb:ReportViewer>
    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    </form>
</body>
</html>

could you please help me to check it out?

Thanks.

Edited by garboy on Dec 21, 2011 10:49 AM
Edited by garboy on Dec 21, 2011 10:50 AM

Reply

N_EvilScott

Star

8303 Points

1488 Posts

Re: ReportViewer with Firefox8 and Chrome15

Dec 21, 2011 06:53 AM|LINK

Try verifying that the handler is listed under httphandlers in your web.config file.

<httpHandlers>
    <add path="Reserved.ReportViewerWebControl.axd" verb="*" type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" validate="false"/>
</httpHandlers>

Scott was here...

Reply

garboy

Member

12 Points

7 Posts

Re: ReportViewer with Firefox8 and Chrome15

Dec 21, 2011 10:53 AM|LINK

Yes, that handler is in my httpHandlers in web.config

here's my httpHandler section

<httpHandlers>
      <add path="asset.axd" verb="GET,HEAD" type="Telerik.Web.Mvc.WebAssetHttpHandler, Telerik.Web.Mvc" validate="false"/>
      <add path="Reserved.ReportViewerWebControl.axd" verb="*" type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" validate="false"/>
      <add verb="POST,GET,HEAD" path="elmah.axd" type="Elmah.ErrorLogPageFactory, Elmah"/>
    </httpHandlers>

also, could you please review my first reply on you? I've edit that, since I found in Chrome, it may be caused by another issue, and I think it is also the reason why report content cannot be shown in FireFox.
That's the 100% table height problem.

Thank you very much!

Edited by garboy on Dec 21, 2011 10:56 AM
Edited by garboy on Dec 21, 2011 10:57 AM

Reply

garboy

Member

12 Points

7 Posts

Re: ReportViewer with Firefox8 and Chrome15

Jan 11, 2012 06:05 AM|LINK

In Chrome, it's the "height=100%" problem.

Once I add following jQuery code, the report area can ben shown.

$(function () {
            $("#ReportViewer1_ctl09").css("height", "auto");
        });

In FireFox, the report page raise an error as following:

"Microsoft.Reporting.WebForms.HttpHandlerInputException 缺少 URL 参数: Name"

and the Query String is: "OpType=BackImage&Version=10.0.40219.329&Color=%23ECE9D8&Name=Microsoft.Reporting.WebForms.Icons.toolbar_bk.png"

I think the "amp;" can not be resolved correctly then caused this exception.

I'm still finding a way to solve this.

Anybody have any ideas?

Thanks.

Marked as answer by garboy on Jan 11, 2012 06:25 AM

Reply

garboy

Member

12 Points

7 Posts

Re: ReportViewer with Firefox8 and Chrome15

Jan 11, 2012 06:25 AM|LINK

according to this article, I think it's caused by a proxy that handles http request..

I checked my request, there's a "FiftyOne ..." in "Brwoser" property of "Request" ojbect.

Since fifty one is no longer used in this project, I removed it from Bin and web config, then the report can be shown in FireFox!

Hope this article can be usefule to other guys.

Thanks.

Marked as answer by garboy on Jan 11, 2012 06:25 AM

Reply

abksharma

Member

22 Points

13 Posts

Re: ReportViewer with Firefox8 and Chrome15

Jan 12, 2012 11:56 AM|LINK

We found out the fix for shirking problem of report. which was by increasing oReportCell size to 100% of reportviewer size. Also Style changes of top bar In chrome by float:Left.

SCRIPT:

var t1;

<div class="webkit-line-content">function manageWidthReportViewer(behID) {</div> <div class="webkit-line-content">t1 = window.setInterval("SetWidthForCrome()", 10);</div> <div class="webkit-line-content webkit-breakpoint">}</div> <div class="webkit-line-content">function SetWidthForCrome() {</div> <div class="webkit-line-content"></div> <div class="webkit-line-content">var mainReportViewer = document.getElementById('iFrameMainReportViewerContainer');</div> <div class="webkit-line-content">var reportFrame = mainReportViewer.contentWindow.document.getElementById('ReportFramereportViewer');</div> <div class="webkit-line-content">var report = reportFrame.contentWindow.document.getElementById("report");</div> <div class="webkit-line-content">if(mainReportViewer.contentDocument.getElementById("reportViewer") != null)</div> <div class="webkit-line-content">mainReportViewer.contentDocument.getElementById("reportViewer").childNodes[2].childNodes[1].childNodes[1].style.float = "left";</div> <div class="webkit-line-content">if (report!=null && report.contentDocument.getElementById("oReportCell") != null) {</div> <div class="webkit-line-content">report.contentDocument.getElementById("oReportCell").style.width="100%";</div> <div class="webkit-line-content"></div> <div class="webkit-line-content">window.clearInterval(t1);</div> <div class="webkit-line-content">}</div> <div class="webkit-line-content">}</div> <div class="webkit-line-content"></div> <div class="webkit-line-content">function SetReportViewerDim() {</div> <div class="webkit-line-content">var controlPanelHeight = screen.availHeight - 210;</div> <div class="webkit-line-content"></div> <div class="webkit-line-content">var mainReportViewer = document.getElementById('iFrameMainReportViewerContainer'); //set</div> <div class="webkit-line-content">mainReportViewer.removeAttribute('height');</div> <div class="webkit-line-content">mainReportViewer.style.height = (controlPanelHeight-37) + "px";</div> <div class="webkit-line-content"></div> <div class="webkit-line-content">var reportViewer = mainReportViewer.contentWindow.document.getElementById('reportViewer'); //set</div> <div class="webkit-line-content">reportViewer.style.height = (controlPanelHeight) + "px";</div> <div class="webkit-line-content"></div> <div class="webkit-line-content">var reportFrame = mainReportViewer.contentWindow.document.getElementById('ReportFramereportViewer');</div> <div class="webkit-line-content"></div> <div class="webkit-line-content">if (Sys.Browser.name == "Safari") {</div> <div class="webkit-line-content">manageWidthReportViewer(reportFrame);</div> <div class="webkit-line-content">}</div> <div class="webkit-line-content"></div> <div class="webkit-line-content">}</div>

Edited by abksharma on Jan 12, 2012 11:57 AM

ReportViewer with Firefox8 and Chrome15 RSS

7 replies

garboy

ReportViewer with Firefox8 and Chrome15

N_EvilScott

Re: ReportViewer with Firefox8 and Chrome15

garboy

Re: ReportViewer with Firefox8 and Chrome15

N_EvilScott

Re: ReportViewer with Firefox8 and Chrome15

garboy

Re: ReportViewer with Firefox8 and Chrome15

garboy

Re: ReportViewer with Firefox8 and Chrome15

garboy

Re: ReportViewer with Firefox8 and Chrome15

abksharma

Re: ReportViewer with Firefox8 and Chrome15

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft