3/17/2013

Freezing the Title Row of a SharePoint 2010 List or Library

 

SharePoint 2010 lists and libraries do not have scrollbars. The pages do, but when you scroll down a long list you will find that the column headings scroll off of the top of the page. The little project below is a quick and dirty little project to add scrollbars to a list and lock the column titles in place.

Before scrolling: (click the image for a larger version)

image

After scrolling (headings have scrolled off of the top):

image

After the fix below:

image

Bonus! Notice that not only are the column headings always displayed, but so is the "Add new item link" at the bottom!

Before you continue…

  • This is a work in progress and presented as starting point for your own experiments!
  • This has only been tested in SharePoint 2010
  • It can be made to work with 2013, but there's a few extra steps that I'll need to document
  • This works with View pages… it needs more work before being used with views displayed in web parts
  • There's some excess white space at the top of the list.
  • This does not work with the following view options (and probably a few more):
    • Grouping
    • The Content Editor Web Part as adding it breaks the default view selection behavior (You must use SharePoint Designer)
  • There is a flaw with FireFox and possibly other browsers:
    • The heading row may be listed twice

 

If you are OK with the above, then give it a try!

Steps:

  1. If you don't want to customize the default "All Items" (allitems.aspx) view then create a new Standard view
  2. You may want to customize your view and set the item limit to a number larger than the default of 30. Do not exceed 5000. (A SharePoint restriction)
  3. Open the site in SharePoint Designer
  4. Click Lists and Libraries and click your list
  5. Click the view you want to customize
  6. Click the Advanced Mode button in the Home tab of the ribbon
  7. In the Code pane scroll down and find "</WebPartPages:WebPartZone>" – you will add your code between that tag and the "</asp:Content>" tag
  8. Copy the code from below and paste between the two tags listed above
  9. Edit the following line and replace Bikes with the name of your list
        var SummaryName = "Bikes "
     
    Note: View your list page, use the browser's View Source feature and search for "summary=". Copy what follows including any spaces. If your list is named Bikes and has no description defined then you will find "Bikes ".  (note the space at the end) If your list has a description then you may find something like "Bikes This is a list of bikes for sale."  (note the exact use of spaces and the possible presence of a period or other punctuation)

    Another example: The default Shared Documents library has this summary name: "Shared Documents Share a document with the team by adding it to this document library."
     
  10. In the <style> section adjust the height of the scrolling area of your list – you may need some trail and error here
    #TTNlist
    {
      height:200px;
      overflow-y:scroll !important;
      overflow-x     :auto
    }
  11. Save your changes and test your view

If it does not work:

Check your SummaryName! It has to be exactly what's found in the view page's HTML.

Try a delayed run of the script…

  Comment out this line by adding two slashes at the beginning:
    //or call the function immediately
    TTNListScroll();         <—this line

  And uncomment the spBodyOnLoadFunctionNames line:
    // update the list after the page has loaded
    //_spBodyOnLoadFunctionNames.push("TTNListScroll");

 

 

The code:

<script>
 
function TTNListScroll()
{
  // Scrolling list code from TechTrainingNotes.blogspot.com
  // Edit the next line with your list's summary name
  var SummaryName = "Bikes 2 ";
 
  var TTNmyTable;    
  var TTNListDiv = document.createElement('div'); 
  var TTNHeadingDiv = document.createElement('div');
 
  var tables = document.getElementsByTagName("TABLE");
  for (var i=0;i<tables.length;i++)
  {
    if ( tables[i].summary == SummaryName )
    {
      TTNmyTable = tables[i];
      break;
    }
  }
 
  if(TTNmyTable == undefined)
  {  
    //
    // Table not found!
    // you may want to comment out the next line after testing
       alert("table '" + SummaryName + "' not found");
    //
    return;
  }
 
  // make a copy of the table for the heading area
  TTNHeadingDiv.appendChild(TTNmyTable.cloneNode(true)); 
  TTNHeadingDiv.id="TTNheading";
  TTNListDiv.appendChild(TTNmyTable.cloneNode(true)); 
  TTNListDiv.id="TTNlist";
  TTNListDiv.width="100%";
 
  // udpate the page
  var TTNnode = TTNmyTable.parentNode
  TTNnode.replaceChild(TTNHeadingDiv, TTNmyTable);
  TTNnode.appendChild(TTNListDiv);
 
  // hide the heading row of the main list
  TTNListDiv.childNodes[0].rows[0].style.visibility='hidden';
  
  // make the DIV for the heading the same width as the main list
  TTNHeadingDiv.childNodes[0].style.width = TTNListDiv.childNodes[0].offsetWidth 
}
 
// update the list after the page has loaded
//_spBodyOnLoadFunctionNames.push("TTNListScroll"); 
 
//or call the function immediately
TTNListScroll();
 
</script>
 
<style type="text/css">
 
#TTNheading
{
  height:28px;
  overflow:hidden;
}
 
#TTNlist
{
  height:200px;
  overflow-y:scroll !important;
  overflow-x     :auto
}
 
</style>

 

 

.

22 comments:

Vijay Thakare said...

can we Freezing Group By List or Library

Vijay Thakare said...

Can We freezing Group By Column List Or Library in SharePoint 2010

Mike Smith said...

As stated above, it does not currently work with grouping. I will revisit this sometime to try and find a better solution.

Mike

Unknown said...

Hi Mike,

Althought this works really well as advised, when users use the ctrl+f function to search the list the 'frozen' panel changes to what is being searched for. Is there anything we can change that would resolve this?

Unknown said...

Hi Mike,

Althought this works really well as advised, when users use the ctrl+f function to search the list the 'frozen' panel changes to what is being searched for. Is there anything we can change that would resolve this?

Unknown said...

Hi Mike,

Althought this works really well as advised, when users use the ctrl+f function to search the list the 'frozen' panel changes to what is being searched for. Is there anything we can change that would resolve this?

Mike Smith said...

Andrew,

I'm going to revisit this when I get a chance. It works, but right now is a just a hack with a lot of issues. I mostly posted it to get other people to start looking for solutions. :-)

Mike

Jeff said...

Mike
Is the SummaryName suppose to be in " " ? When I use "s it can't find the list. And is this normal?
var SummaryName = CAR-PAR QSF 8.5-QS-0001 Corrective Action Request
QSF 8.5-QS-0002 Corrective Action Log
QSF 8.5-QS-0004 Supplier Corrective Action Request;
As you can tell I am having trouble getting this to work.

Anonymous said...

just want to say thank you for your great work MIKE !
greetings from germany

Anonymous said...

That worked perfectly in SP2010 with IE9 - thanks!!

Edward

Anonymous said...

This works great. The only problem that we seem to have is that our lists are quite long by design. I've adjusted the height within the code severals ways but it seems that in order to get to the bottom of the list you need to use the page scroll, and when you scroll the page you lose the headings again. Is there a trick to this that you know of?

Anonymous said...

thank you so much for this post. Could you help me with the code to move the scrollbar for the list to the left of the screen. My list is very wide so the scrollbar is hidden when it is on the right.
Thanks in Advance

Mike Smith said...

Anon,

While its possible to move the scroll bar to the left using CSS (http://www.bing.com/search?q=css+left+scrollbar), I could not find an example for SharePoint, and the other examples I found hint that the alignment of the contents could get messed up.

It might be possible to do with JavaScript.

Mike

Anonymous said...

Thank you. But the delete button is disabled also the select all check box is not working. Is any solution there

Unknown said...

Thanks for your Tech Help. But here is my challenge is, this List view does not allowed me to Multi select list items. And also Delete option is also disabled. when i am removing this script and style it works perfectly i.e i am able to multi select and also able to Delete items. Kindly anyone can advice me on this?

Anonymous said...

select or deselect option is not working while using this freeze solution. how to do that

Unknown said...

Mike,

Great work! FYI, I was able to implement your solution, then implement grouping within SharePoint Designer; worked like a charm.

Just curious if you've attempted to freeze both the title row and the first x number of columns? Would be helpful in lists that display both x & y scroll bars.

Thanks,
Todd

Alex Zoutenbier said...

Hi Mike, great post! It works perfect!

Anonymous said...

thank you very much :-) it works like a charm :-)

thanks again :-)

Amber R said...

Mike, I have spent many an hour with your code :)

I like Andrew am having the issue where the Header row changes when you use the Ctrl+F search function.

I am hoping that someone has resolved the issue or come up with another way to search the page that does not do this?

My team relies on this function a lot!~

Anonymous said...

Instead of freezing the headings you could also limit the number of rows that the list view displays per page, that way the headings are always visible.

Anonymous said...

Would love to try this in SharePoint 2013 but the summary name errors out. Even though the Table tag has a summary in it. Any tips for making this work w/ 2013?

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.