ReportViewer problem in google chrome

问题

I am using Reportviewer in my asp.net mvc (C#) application. In IE and Firefox, the reportviewer looks fine.

But in Chrome, the header and body gets shrinked. I was able to correct the header display problem as suggested in http://www.mazsoft.com/blog/post/2009/08/13/ReportViewer-control-toolbar-in-Google-Chrome-browser.aspx.

  if ($.browser.safari) {
      $("#ReportViewerControl table").each(function(i, item) {
         $(item).css('display', 'inline-block');
      });
  }

But the Body(Viewer) part still appears to be in half of the screen. The problem appears to be with the width of empty second td of the table:

<table cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td onpropertychange="ShowFixedHeaders()" id="oReportCell">....Some Data...</td>
      <td height="0" width="100%"></td>
    </tr>
  </tbody>
</table>

The Second td in the above table is empty with 100% width, this may be the cause of the bug in chrome. How can i remove the width of the second td or is there any fix for this? ReportViewer Design http://www.freeimagehosting.net/uploads/13114a4f00.png

How can i access the element inside nested iframe?

回答1:

If the Reportviewer does not display the data or it is not rendered in any browser then just do the following in your ASP.NET page:

Replace:

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

with the following tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

回答2:

I had the same problem and fixed it with jQuery. Because the report viewer uses iframes, it's not easy getting to the <TD> element needing to be removed. I tried various methods and finally settled on the following hack. It probably isn't as good as it can be, but it works for me.

First I wrap the report viewer in a <DIV> and hide it:

<div id="rpt-container" style="display: none;">
    <rsweb:ReportViewer ID="rptViewer" Width="99.9%"    BackColor="#eeeeee" 
            runat="server" ShowExportControls="False"> 
    </rsweb:ReportViewer>
 </div>

Then I added the following jQuery snippet to locate the element to be removed allowing successful rendering in Chrome.

<script type="text/javascript"> 
    $().ready(function() {
         setTimeout( function(){  
             $('td#oReportCell', window.parent.frames[0].frames[1].document).next().remove();  
             $("#rpt-container").fadeIn();
          }, 300);  //slight delay to allow the iframe to load
     });
 </script>

I tried using the frameReady plugin, but didn't have much luck. So as a compromise, I simply set a delay of around 300 milliseconds before trying to pick off the DOM element inside the iframe. If you don't hide/fadeIn the report, you see some ugly animation as the element is removed.

回答3:

I have similar problem with ReportViewer on my aspx page. In IE9 I have also all fields in the report shrunk because the last TD element in table has width=100%.

In my Aspx page, I use

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

When I delete this DOCTYPE element, then fields in report are not shrunk.

回答4:

Try with more jQuery maybe

$().ready(function() {
    $('#ReportViewerControl table td[width="100%"]').attr('width','');
});

Although this will probably affect other items in the report?

来源：https://stackoverflow.com/questions/2139223/reportviewer-problem-in-google-chrome

标签

jquery

asp.net-mvc

reportviewer