Report Viewer 10 Blurry and Jumpy in ASP.NET

Below are solutions for two issues I experienced when implementing the ReportViewer 10 control in a new ASP.NET 4.0 web application.  The control was being loaded asynchronously and was set to size itself to the report content.

Blurry Text with Graph Images

Label text for axis or legends were showing up blurred in different browsers for different graphs.  It ended up being the css that gets generated with the control on the page.  It was setting specific widths and heights on images (using millimeters?) which caused the images to be displayed at something other than their true dimensions.  We put a class of “ReportViewerControl” on all of our controls and then put this style in our stylesheet to override the generated styles.

.ReportViewerControl img
{
    width: auto !important;
    height: auto !important;
}

Page Jumping to Top While Report Loads

If a user tried to scroll down while a report was loading, the page would jump back up to the top of the page while it was loading or when it finished.  We thought this might have been something to do with the javascript the report uses but we ended up thinking it was something more related to how ASP.NET AJAX works (that’s what the report uses to load asynchronously).  Somewhere in the javascript it is using the standard scrollTo function so since we didn’t need that function for our pages we overrode it to do nothing.

<script>
window.scrollTo = function( x,y ) 
{
    return true;
}
</script>
Advertisements