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).
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');});*/
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!
