Display a Grouped Items in a List or Document Library from another Sharepoint Site

We had a requirement that needs to display a certain view of a document library in another site to a different site. After searching, with the help of Mr. Google, we stumbled upon the Path To SharePoint blog and thanks to Christophe we found the solution. Here is the LINK .

But the problem is that the Javascript solution by Christophe has some limitations like grouping , sorting, next page are disabled and we need those functionalities in some of the Sharepoint views to be displayed.

Because of that, my colleague (not to be named according to him lol) modified Christophe’s original CrossSite Javascript. There are two solutions, one for Sharepoint 2007 and one for Sharepoint 2010. There are two scripts because of the difference in UI of the two versions.

I would like to thank Christophe for his wonderful scipt.

For comments and suggestions feel free to comment below.

This is the modified script:

For Sharepoint 2007

<!-- Load and display list - iframe version for Grouped Items SP2007-->

<DIV id="ListPlaceholder"><IMG src="/_layouts/images/GEARS_AN.GIF"></DIV>

<!-- Paste the URL of the source list below: -->
<iframe id="SourceList" style="width:100%; height:250px;display:none;" src="/sites/TestSite/MekList/MyView.aspx" onload="DisplayThisList()"></iframe>

<script type="text/javascript">
function DisplayThisList()
{
var placeholder = document.getElementById("ListPlaceholder");

var displaylist = null;
var sourcelist = document.getElementById("SourceList");

try {
if(sourcelist.contentDocument)
// Firefox, Opera

{displaylist = sourcelist.contentDocument.getElementById("WebPartWPQ2") ;}
else if(sourcelist.contentWindow)
// Internet Explorer

{displaylist = sourcelist.contentWindow.document.getElementById("WebPartWPQ2") ;}
else if(sourcelist.document)
// Others?

{displaylist = sourcelist.document.getElementById("WebPartWPQ2") ;}
}
catch(err) { alert ("Loading failed");}

displaylist.removeChild(displaylist.getElementsByTagName("table")[0]);
var allDescendants = displaylist.getElementsByTagName("*");
for (i=0;i<allDescendants.length;i ) {
}
placeholder.style.visibility = "hidden";
placeholder.style.display= "none";
sourcelist.style.visibility = "visible";
sourcelist.style.display= "block";
sourcelist.contentWindow.document.getElementById('pageConstraints').outerHTML= displaylist.outerHTML;
sourcelist.contentWindow.document.body.style.border ="none";
sourcelist.height = sourcelist.contentWindow.document.forms[0].offsetHeight + 50;
}
</script>

For Sharepoint 2010

<!-- Load and display list - iframe version for Grouped Items SP2010-->

<div id="ListPlaceholder" style="display: none"><img src="/_layouts/images/GEARS_AN.GIF" alt=""/></div>

<!-- Paste the URL of the source list below: -->
<iframe id="SourceList" src="/sites/TestSite/MekList/MyView.aspx" frameborder="0" onload="DisplayThisList()" style="width: 100%; height: 250px"></iframe>

<script type="text/javascript">
function DisplayThisList()
{
var placeholder = document.getElementById("ListPlaceholder");

var displaylist = null;
var sourcelist = document.getElementById("SourceList");

try {
if(sourcelist.contentDocument)
// Firefox, Opera

{displaylist = sourcelist.contentDocument.getElementById("WebPartWPQ2") ;}
else if(sourcelist.contentWindow)
// Internet Explorer

{displaylist = sourcelist.contentWindow.document.getElementById("WebPartWPQ2") ;}
else if(sourcelist.document)
// Others?

{displaylist = sourcelist.document.getElementById("WebPartWPQ2") ;}
}
catch(err) { alert ("Loading failed");}
placeholder.style.display = "none";
sourcelist.contentDocument.getElementById("ctl00_IplsFooter").style.display = "none";
sourcelist.contentDocument.getElementById("MSO_ContentTable").style.marginLeft = "0px";
sourcelist.contentDocument.getElementById("s4-ribbonrow").style.display = "none";
sourcelist.contentDocument.getElementById("s4-titlerow").style.display = "none";
sourcelist.contentDocument.getElementById("s4-leftpanel").style.display = "none";
}</script>

SCREENSHOT SP2010: