Wednesday, August 17, 2011

SharePoint 2010 jQuery: List Scrolling View with Frozen Header


Problem:

Many times SharePoint List has huge amount of records (Number of items) and it’s hard to scroll out the view. Also while scrolling the page we cannot determine which information is from which column.

Solution:

By simple applying CSS we can achieve the Frozen Headers like Excel Sheet. And for achieving the same we use JQuery.

Implementation: 

1. Go to List View Page and Html Form Webpart on the same page.
2. Copy Following code in Html Form Webpart. Just replace the LISTID and VIEWID (Highlighted in yellow color).

<script type="text/javascript" src="/Style Library/jq.Smoothness/js/jquery-1.5.1.min.js"></script>
<style type="text/css">
<!--
.DataGridFixedHeader { position: relative; top: expression (this.offsetParent.scrollTop); background-color: gray;}
-->
</style>
<script type="text/javascript">

$(function(){

var $table = $("TABLE[ID^='{F1D2645C-4CC3-458C-BC93-CBCFECD12171}-{5AB46E0C-D38F-4FF2-BBE0-0D485CC351E9}']: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>

Note:
For IE8 and IE9 browsers, require change in CSS class .DataGridFixedHeader  as follows.
 position: absolute;
Output:

30 comments:

  1. Hello I am trying to use this exact code, I mean i changed the table Id.

    But I am not able to freeze the header.

    Can you please tell me what could be the issue?

    -Kunjan

    ReplyDelete
  2. Hi,
    Above code was tested on SharePoint 2010 and worked perfectly.
    You can do some Troubleshooting:
    1. Check Table GUID .
    2. Add this code in HTML form WebPart on List view page.
    3. Keep HTML form WP at the bottom of the page.
    4. Check JQuery file Reference link.

    If this not working post your code, i will check and let you know.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. I use Sharepoint 2010 and IE 9.0, but your solution doesn't work.
    The above part will be frozen, not the table header. What did I wrong?

    ReplyDelete
  5. Do I place this code in a CEWP or Do i have to use SharePoint Designer? I tried in a CEWP part and it does not seem to do anything?

    ReplyDelete
  6. Hi Sveta/Julian,
    Have you tried above mentioned Troubleshooting tips?
    Don’t use CEWP; use HTML Form WP.

    ReplyDelete
  7. Great!This article is creative,there are a lot of new idea,it gives me inspiration.I think I will also inspired by you and think about more new ideas.

    ----------------------------------------------------------
    New Style Wedding Dresses
    Column Wedding Dresses
    Wedding Dresses with Sleeves
    New Style Flower Girl Dresses

    ReplyDelete
  8. Hi Amit

    how can i find the 'jquery-1.5.1.min.js' file to upload it into style library

    ReplyDelete
  9. Use SharePoint Designer to upload the file.

    ReplyDelete
    Replies
    1. could u plz share the file jquery-1.5.1.min.js

      Delete
    2. Could you please share the file jquery-1.5.1.min.js and tell me where to upload it to please?

      Delete
  10. Hi Amit,

    I used it.Its not working.I can see the scroll down but it does not freeze the header. I have used all the troubleshooting tips as well. It will be great if you could help me.

    ReplyDelete
    Replies
    1. Check 'ms-viewheadertr' class is present. if Yes, then provide error message that appare in browser status bar.
      If Not, you are applying this solution on MOSS which is not supported by this solution.

      Delete
  11. Hi Amit,
    I used your solution.. but the header isn’t frozen. I’m using SP 2010 with IE 9. I think that the CSS Style “.DataGridFixedHeader“ does not working with IE9. Specially the “top: expression (this.offsetParent.scrollTop);“. The JQuery is working the header is using the CSS Class and appears gray…When I switch the browser to IE7, the header row is working as expected.
    Do you have any hints for me?

    ReplyDelete
  12. Hi,try below css for IE9 browser.

    For Class > .DataGridFixedHeader
    Change > position: relative; To > position: absolute;

    ReplyDelete
  13. Hi, I have tried the code and also the troubleshooting but still the top header isnt freezing (it's also not being coloured grey). I'm using SharePoint 2010 and IE8.

    How do I post my code here? i keep getting an error stating your HTML cannot be accepted. PHP, ASP and other server side scripting is not allowed

    ReplyDelete
  14. Amit, Thank you so much for this. 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!

    Erin

    ReplyDelete
  15. The code worked for me too but I also have the same question as above. 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. Any help is greatly appreciated!

    ReplyDelete
  16. Actually for freezing the headers we need to detach the header TR from the rendered view HTML.

    And here is the solution for this problem, gets the width each column of first data row, and set this width to each column of header row using JQuery.

    ReplyDelete
    Replies
    1. Can you please elaborate how to detach the header TR as well as how to fix the widths of columns?

      Delete
    2. I would appreciate if you could please provide the instructions on how to detach the header TR. Could you please email me to radhisoms@gmail.com

      Delete
    3. Also would like an elaboration on this. Thanks!

      Delete
  17. Thanks for a wonderful post but I am greatly interested in knowing how to dettach the header TR and fixiing widths. Can you please elaborate and provide code for reference?

    Need to get this working urgently. Your help will be greatly appreciated.

    ReplyDelete
  18. Hi Amit, thanks for the great post but I am not getting the headers freeze, will you please suggest what should I do ?

    I am applying this in publishing site with IE 10.

    ReplyDelete
  19. Hi Amit, Code is not working for me too..

    ReplyDelete
  20. What about SharePoint 2013? How can I accomplish that in 2013?

    ReplyDelete
  21. Hello Everyone,

    First of all good news is! I have implemented new jquery plug-in to freeze the list headers as well as columns. I will post it in few days. Just stabilizing it for all browsers and Office 365. No worries :)

    And I apologies for inconvenience caused as I didn’t replied on few comments.

    Figure crossed for new version…

    ReplyDelete
  22. Hi Amit is the new version out yet?

    ReplyDelete
  23. If someone could take a moment to help me make this code work. I have replaced the LIST and VIEW IDs, and changed the position to absolute. It is inserted into the HTML Form webpart. When I run through developer tools in IE11 (which is emulating IE8) there are no errors. I would very much appreciate any help.

    ReplyDelete
  24. Hi, Is there any way to freeze the columns horizontally, so when I scroll to the right, the first 3 or 4 columns are frozen with the data

    ReplyDelete