Thursday, February 18, 2010

SharePoint List Fixed Header

The following script from

http://kjellsj.blogspot.com/2009/06/sharepoint-jquery-scrolling-view-with.html

Gives the possiblity to fix the list header for large lists.

I modified the script from Kjell-Sverre Jerijærvi to adapt to the screen height.

Please change the src link to the jQuery file and the list QUID. Both are marked with grey.

 

<script

src="Link to jquery.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^='{BFD03356-0ACF-4950-9C6C-D772A31E3E46}']:first",

"#MSO_ContentTable");

<!--WRAP TABLE IN SCROLL PANE-->

$table.wrap("<DIV style='OVERFLOW: auto; HEIGHT: " + (screen.height-400) + "px'></DIV>"); <!--FROZEN HEADER ROW--> $("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader");

});

</script>

6 comments:

Carine said...

Thanks for the posting. This works as expected. The only little problem that I run into is that the background color of the header doesn't "stay" when I scroll down the list. So I can see the column names but they kinda overlap with the actual values in the list, since the background is transparent...

Kevin Ultsh said...

Hi, I'm new to adding codes to SharePoint. I was just wondering where do you get the jQuery source code and also where do you insert this code? Would you create a Content Editor Webpart? Thanks for any help!

Hariny said...

Hello, I have used this code successfully. But would like to make the row below the header frozen too. (I have used this row to display the list row count by changing the list view and I would like this count data to be visible even when one scrolls down the list)Could you please tell me how to do it? WOuld greatly appreciate your help!

Martin Hoffmann said...

Hi there, another solution that looks much better and is SP2010 ready has been published by Benjamin Gemperle (GERMAN blog) - code can be downloaded from there:

http://2sicgeeks.wordpress.com/2012/02/09/spaltenuberschriften-in-sharepoint-tabellen-listenansichten-einfrierenfixieren/

Bani Preet said...

The code worked for me but I have a follow up question. After I was able to freeze the header row, the header row now covers up the first few lines of the first row of data. Additionally, the header columns no longer align with the columns in my list. Have you heard of these issues? Any help is greatly appreciated!

Damian DuBos said...

Thanks for the info. I have tried all of the different iterations of this. The footer "Create an item" stays frozen. But, the first row (header scrolls off the screen. I am thinking the site has some other style that is overwriting it or something.