Reporting Services web parts on SharePoint page

Problem
Adding Report Builder web parts to SharePoint 2010 made the page colorful and intelligent, but the UI lacked a bit. 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

Solution
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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s