Reporting Services web parts on SharePoint page

May 4, 2012

The parts that took up little horizontal space and lots of vertical space looked kind of goofy;

  • the data abruptly cut off vertically after 11 inches
  • they required a fixed vertical setting at about 2000px
  • they would not flow horizontally with the page’s liquid layout
  • they sometimes created two layers of scroll bars making moving around on the page very awkward

Data typically cuts off vertically after a certain length because of paging; the page breaks based on the Interactive Size setting of the Report pane set in Report Builder. The fix is to set the InteractiveSize settings to 0. Might as well do it on both horizontal and vertical properties.

Avoid the fixed vertical and horizontal web part settings in SharePoint by using a wee bit of jQuery, unless you are free to do it with a server-side package. Start by removing any Height and Width settings in the web part.

Then add jQuery code in an HTM file strategically placed in a Documents Library like “Scripts” at some root site and call the file from a Content Editor web part on the report page. The following code seems to work – it works on ALL Report Builder web parts on the page and avoids conflicts with other parts.

<style type="text/css">
  .dynamic-height {height:auto !important;}
</style>
<script src="http://domainname/somerootsite/scripts/jquery-1.6.2.min.js"></script>

<script type="text/javascript">
  // use setTimeout method to delay
  $(window).load(function() {
    setTimeout("FixReport()",2000);
  });
</script>

<script type="text/javascript">
  function FixReport() {
    // fix report height
    $('div[RSViewer="RSViewer"] div').addClass('dynamic-height');
    // remove report horizontal scrollbar
    $('div[id$="ReportViewer"]').css("overflow-x", "hidden");
  }
</script>

Even if the Report Builder web parts only have 2″ to 5″ of width, you can extend the part up to 12″ wide. It will allow a single column page fill out nicely to the right when the browser expands to fit larger screens – same for parts in side-by-side zones.

References:
See Article 1, Article 2, and Article 3

Leave a Reply

Your email address will not be published. Required fields are marked *