SharePoint 2010: Freeze Header Row of SharePoint List View

  • Article

SharePoint List

When a SharePoint list contains lots of data then it becomes hard to understand the data when you scroll down and header row is not visible , every time you have to scroll up to see what data in this particular cell is, you tend to check the column in the header. It will be easy to understand the data when your header row is visible all the time while you are scrolling down.

Here is a simple JQuery script which you can put in a content editor web part on the same list view page. It many not be required to make all list view header freeze so you can use this script only on the page where you want your list view header  to freeze

 

      <script src=    "          http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js        "  
      type=    "text/javascript"    ></script>  
      <style type=    "text/css"    >  
      <!--  
      .DataGridFixedHeader { ; 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>

The above script uses a table as variable which is using the list GUID and the View ID so you have to update this portion of the script as per your list.

You can check the problem statement MSDN forum post at below link:

Other Languages

This article is also available in other languages:

See Also

An important place to find a huge amount of SharePoint related articles is the TechNet Wiki itself. The best entry point is SharePoint Resources on the TechNet Wiki