Content Editor Web Part Saves the Day (Again)

My friend and fellow SharePoint enthusiast Brad is my guest blogger for the week. I did not know of this trick until reading his post - can't wait to try it and show you all my results!!


------


I suppose I would call myself a SharePoint Designer at my company, but perhaps I’m just a glorified power user that has more access than others. Speaking of power, I’ve recently learned of a powerful way to, once again, use JavaScript in a content editor web part (CEWP) to modify how a SharePoint list is displayed. 

The issue: Users want to be able to “lock” the column headings that are displayed in a list. A user attempting to view contents in a long list may be required to scroll down the list, which effectively “hides” the column headings -- this can make the data confusing. 

A solution: Add the JavaScript pasted below into the source of a CEWP. Make sure to enter the list’s GUID into the code (replace the GUID in the example).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
<!--
.DataGridFixedHeader { position: relative; top: expression(this.offsetParent.scrollTop);}
-->
</style>

<script type="text/javascript">
$(function(){
var $table = $("TABLE[ID^='{4C9CFF20-B467-4E10-820C-0A132442CF98}']:first", "#MSO_ContentTable");

<!--WRAP TABLE IN SCROLL PANE-->
$table.wrap("<DIV style='OVERFLOW: auto; HEIGHT: 575px'></DIV>");
<!--FROZEN HEADER ROW-->
$("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader");
});
</script>

Note: The GUID that must be replaced in this table is 4C9CFF20-B467-4E10-820C-0A132442CF98. I have included a link to some documentation on how to easily identify a list’s GUID - http://sanketinfo.blogspot.com/2009/05/how-to-find-guid-of-sharepoint-list.html