Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I have a list with a huge amount of data. I would like the header row (with the titles of the columns) and the first X columns (the number varies depending on the list view) to remain frozen while the user scrolls through the content. I know that Datasheet View freezes the header row, but I need the Standard View to do so. I know that I can accomplish this with a standard table in a standard HTML page using the code from http://fixedheadertable.com/.

So, now I am trying to determine how to integrate that code with my list. I figure I can add the jQuery via a reference in my Master page (I have found a few references on how to do that). But, I'm not still not sure of the steps.

More significantly, I have muliptle views of my list. I know that I can modify the code of each view's aspx page in SPD. Since each view is different, I figure that I must add view-specific code to each view's aspx page. But how? where?

I am sure that I am over-complicating things, but I just don't see how to get from http://fixedheadertable.com/ to making it work in SharePoint.

Thanks very much for your help!!

share|improve this question
add comment

2 Answers 2

Just happened to run across your question. Not sure if you work with JQuery but the code below works on a List View.

<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: 420px'></DIV>");
<!--FROZEN HEADER ROW-->
$("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader");
});
</script>
share|improve this answer
    
Hi Charlie. Thanks for your feedback. I think I'm just totally lost here. I put the minified reference that you listed above, the table wrapping code that you listed, the styles provided for FixedHeaderTable, the jQuery code for FixedHeaderTable (from jquery.fixedheadertable.js), and javascript that defines the table parameters (from demo.js). I also modified those parameters to refer to the class that you listed (DataGridFixedHeader). I stopped editing and refreshed the listview: no change. I know I am being totally stupid here, but I am just completely lost. Please help, and thanks!! –  Daniel Keith Dec 29 '11 at 22:08
    
I think your code is from kjellsj.blogspot.com/2009/06/… and my understanding is that does not work for SharePoint 2010 and IE8 (I think it uses the deprecated CSS "expression"). –  Daniel Keith Dec 29 '11 at 22:22
    
Hi Kit. Thanks for the update, but with the "expression" css, it fails in modern browsers. Any ideas? –  Daniel Keith Dec 30 '11 at 17:01
add comment

SharePoint list views don't have a standard structure with a head section. To make your code work, you'll need to:

  • add a head tag to your table (prepend)
  • Move the headers (first row of the body) to the head
share|improve this answer
    
Thanks, Christophe. As always, you're the man! –  Daniel Keith Jan 3 '12 at 17:25
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.