Automatically resizing Sharepoint Excel Web Parts

philchuang — Wed, 28 Apr 2010 18:51:00 GMT

If you've ever done excel web parts in sharepoint, you know that most of the time they turn out ugly, due to the fact that they're rendered in an iframe and therefore the browser doesn't resize the container to fit the content.

So I went googling, and found Paul Grenier's article JQuery for Everyone: Dynamically Sizing Excel Web Parts. That got me started, but it didn't quite work so I had to hack it until it did.

I also adapted the code to resize charts instead of just tables.

What you're going to want to do is edit the page where you want the resizing to happen, add in a content editor web part, and paste the following code into the source editor.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () { // resizes excel webparts
	$("td[id^='MSOZoneCell_WebPart']").each (function (i, e) {
		var findIframe = $(e).find ("iframe:first");
		if (findIframe && findIframe.attr ("scriptforiframecontent"))
			bindEwaLoaded ("#"+e.id);
	});
});

function bindEwaLoaded(obj) { // bind event to the web part
	$(obj).bind ("ewaLoaded", function (e) {
		var b = $(e.target).find ("iframe:first").attr ("postedbackalready");
		if (b == undefined) // loop until iframe is ready
			setTimeout (function() { $(e.target).trigger ("ewaLoaded"); }, 1000);
		else // try to resize now
			ewaSetSize (e.target);
	}).trigger ("ewaLoaded"); // first trigger now
}

function ewaSetSize(obj) { // resize elements
	// configure paddings
	var excelObjectWidthPadding = 50;
	var excelObjectHeightPadding = 50.
	var w, h, div1, div2;
	var e = $(obj).find ("iframe:first").contents().find ("table.ewrnav-invisibletable-nopadding:last");
	if (e.length != 0) { // excel table
		w = e.width ();
		h = e.height ();
		div1 = $(obj).find ("table:first> tbody:first> tr:eq(1)> td> div> div");
		div2 = $(div1).find ("table:first> tbody:first> tr:eq(1)> td> div");
	} else {
		e = $(obj).find ("iframe:first").contents().find ("div.ewrchart-img-div");
		if (e.length != 0) { // excel chart
			w = e.width ();
			h = e.height ();
			div1 = $(obj).find ("table:first> tbody:first> tr:eq(0)> td> div> div");
			div2 = $(div1).find ("table:first> tbody:first> tr:eq(1)> td> div");
		}
	}

	if (w == 0 || w == undefined) { // loop until content is ready
		setTimeout (function() { ewaSetSize (obj); }, 1000);
	} else { // do resize
		w += excelObjectWidthPadding;
		h += excelObjectHeightPadding;
		div1.width (w);
		div2.height (h);
	}
}
</script>

Once that's done, change the Appearance > Chrome Type to "None". You can also configure excelObjectXXXXPadding to your liking.

Search results matching tag 'javascript'

Automatically resizing Sharepoint Excel Web Parts