Wednesday, 17 April 2013

2012 Report Viewer, wait animation, and the double scroll bar

I’ve had to convert a load of reports from SSRS 2005 to 2012.  A few quirks notwithstanding, it’s mostly gone well.  However I was also tasked with getting rid of the dreaded double-scrollbar.  This was quite easy to do – just set the height of the report viewer control to 100% (I’m using the 2012 report viewer).  The problem is that when you do this the wait animation repositions itself to the top of the page, because until the report is rendered it’s also the bottom of the page.  Anyway this is fairly easy to get round with a spot of jQuery.
First, find the name of the wait animation div – the id is derived from the name of the control and suffixed with _AsyncWait_Wait (e.g. a control called myReportViewer would result in a wait div called myReportViewer_AsyncWait_Wait).  Add a reference to jQuery to your page, then add the following code in an inline JavaScript block (replacing the waitControl selector with the correct id for your div):
$(document).ready(function() {
    var waitControl = $("#myReportViewer_AsyncWait_Wait");

    if (waitControl.size() !== 0) {
        waitControl.css('margin-top', '300px');
Not the neatest approach but it works.

UPDATE: After a good night's sleep I realised that a better approach is to use CSS (as this continues to apply even after page refreshes when Report Viewer rewrites its own DOM):

#myReportViewer_AsyncWait_Wait { margin-top:300px; }

No comments:

Post a Comment