We include the ASP.NET ReportViewer which comes with Microsoft SQL Reporting Services inside some of our applications. Simply put, it generates a web-based version of the report and can easily be integrated within a website. However, the ReportViewer has been plagued with numerous cross-browser compatibility bugs over the years. Some have been fixed, while others remain. Recently, we’ve had the following issues:

  • On Google Chrome, each button in the toolbar takes a separate line. You thus end up with 5 toolbars instead of one, taking up all the space.
  • On Google Chrome, the width & height were slightly off (50 to 100 pixels), causing scrollbars to appear.
    A quick search revealed some sample code for similar issues, but none of them fully resolved our issues. Mainly, we require AsyncRendering=”true” and most of the fixes didn’t work in this context. Here’s what we ended up rolling with (uses jQuery and Microsoft AJAX).
    ~/js/fixReportViewer.js
       1:  // container is either the ReportViewer control itself, or a div containing it. 
       2:  function fixReportingServices(container) {
       3:      if ($.browser.safari) { // toolbars appeared on separate lines. 
       4:          $('#' + container + ' table').each(function (i, item) {
       5:              if ($(item).attr('id') && $(item).attr('id').match(/fixedTable$/) != null)
       6:                  $(item).css('display', 'table');
       7:              else
       8:                  $(item).css('display', 'inline-block');
       9:          });
      10:      }
      11:  }
      12:  // needed when AsyncEnabled=true. 
      13:  Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () { fixReportingServices('rpt-container'); });
      14:  /*$(document).ready(function () { fixReportingServices('rpt-container');});*/
    example .aspx
   1:  <div style="background-color: White; width: 950px" id="rpt-container">
   2:      <rsweb:ReportViewer ID="ReportViewer1" runat="server" Font-Names="Times New Roman"
   3:          Font-Size="8pt" Height="700px" Width="950px" ShowExportControls="true" ShowPrintButton="false" 
   4:          ShowRefreshButton="false" ShowZoomControl="false" SkinID="" AsyncRendering="true"
   5:          ShowBackButton="false">
   6:          <LocalReport ReportPath="contract.rdlc"
   7:              DisplayName="Contract">
   8:          </LocalReport>
   9:      </rsweb:ReportViewer>
  10:  </div>
  11:  <asp:ScriptManagerProxy ID="proxy" runat="server">
  12:      <Scripts>
  13:          <asp:ScriptReference Path="~/js/fixReportViewer.js" />
  14:      </Scripts>
  15:  </asp:ScriptManagerProxy>

The fixes we found on other websites (setting the display to inline-block on the included tables) only worked for the first load – as soon as the report changed due to AsyncRendering=”true”, the toolbars were broken again. This was fixed by replacing jQuery’s ready function with Microsoft ASP.NET Ajax’s PageLoaded function.

We also noticed that these fixes also broke down our width & height. We pinpointed the issue to the generated HTML table with the id ending with fixedTable, which needed to be left as display table instead of inline-block. We thus adapted the JavaScript.

The HTML wraps the ReportViewer with a div, mostly for convenience (to avoid peppering our code with <%= ReportViewer1.ClientID %>). Furthermore, if my memory serves me well, we set the background-color manually because some browsers made the ReportViewer transparent.

Hope this helps! If you find more elegant ways of doing this, or know of more gotchas, please let us know!