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?

RKK

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

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.

rocket

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.

Rob Stevenson-Leggett

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