locked
Freeze List Header Row while Scrolling RRS feed

  • Question

  • Hi,

    I want to freeze the header row of a list so that users can still see the header when they scroll down to the bottom of the list. I've tried to implement this solution: http://amitphule.blogspot.com/2011/08/sharepoint-2010-jquery-list-scrolling.html

    And set position to absolute in .DataGridFixedHeader class because we are using IE9.

    However, the result was not acceptable in both IE9 and FireFox (see the image below). The header row did freeze but it also covers the first 2 records (I have test1 and test2 before test3 in the list below) because the inner scroll bar is not under the header. Also the header row is not aligned with the records and the data table shifts to the right whenever the mouse hovers over a record.

    I'm hoping someone could suggest a possible solution for this issue, or another way to freeze list header.

    Thank you,

    Claire




    • Edited by Claire_CS Thursday, October 11, 2012 4:48 PM
    Tuesday, October 9, 2012 11:29 PM

Answers

  • Hi ,

    I understand that you want to freeze the column header while scrolling. The general idea is to separate the content to individual <table> or <div> tags, then use CSS (overflow-x:scroll) to make certain table rows to be fixed or have a scroll bar.

      • Create a basic DFWP. I created one against a custom list. No additional columns are needed for now. This can be made much more complicated later.
      • Add the title column and created by column.
      • Enable filtering at the table heading level so we have all the templates we want in place.
      • Open the code view and find the table that houses the guts of the DFWP.
      • Place a <div> tag around each table. Give the top table a div id of Fixed and the bottom one Scroll.
      • Finally, create another div tag that houses both of the divs we just created and their content. Give it an id of container…

    For more detailed steps, you can refer to this site:

    Freeze Header Row and First Columns in a List: http://social.technet.microsoft.com/Forums/en-US/sharepoint2010customization/thread/bab16d46-f145-4bd3-a1da-9db461fc6a8d/

    Thanks,

    Entan Ming


    Entan Ming

    TechNet Community Support

    • Marked as answer by Entan Ming Thursday, October 18, 2012 5:48 AM
    Thursday, October 11, 2012 2:17 AM
  • HI

    an easiest method, using SHP Designer

    Insert as before the DFWP.

    Using the mouse slect your columns' header

    goto source side , and youl will see that all columns are presented in a row, 

    something like

    <tr>

    <th>column1</th>....

    ...and so on...

    </tr>

    Cut this part

    Before your DFWP, insert/paste this code.


    Romeo Donca, Orange Romania (MCSE, MCITP, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    • Marked as answer by Entan Ming Thursday, October 18, 2012 5:48 AM
    Thursday, October 11, 2012 11:41 AM

All replies

  • Hi,

    The javascript/jquery is fine. However, you need to do the following also

    • add a head tag to your table (prepend)
    • Move the headers (first row of the body) to the head

    More Reference here:

    1) http://my-spblog.blogspot.in/2011/03/really-good-article-to-freeze-header-in.html

    2) http://sharepoint.stackexchange.com/questions/26041/freeze-header-row-and-first-columns-in-a-list

    Hope it helps.

    Wednesday, October 10, 2012 5:48 AM
  • Hi Venkatzeus,

    Could you elaborate more on this? I'm not really familiar with customizing XSLT, how do I do the following tasks? 

    • add a head tag to your table (prepend)
    • Move the headers (first row of the body) to the head

    Thank you.

    Thursday, October 11, 2012 12:50 AM
  • Hi ,

    I understand that you want to freeze the column header while scrolling. The general idea is to separate the content to individual <table> or <div> tags, then use CSS (overflow-x:scroll) to make certain table rows to be fixed or have a scroll bar.

      • Create a basic DFWP. I created one against a custom list. No additional columns are needed for now. This can be made much more complicated later.
      • Add the title column and created by column.
      • Enable filtering at the table heading level so we have all the templates we want in place.
      • Open the code view and find the table that houses the guts of the DFWP.
      • Place a <div> tag around each table. Give the top table a div id of Fixed and the bottom one Scroll.
      • Finally, create another div tag that houses both of the divs we just created and their content. Give it an id of container…

    For more detailed steps, you can refer to this site:

    Freeze Header Row and First Columns in a List: http://social.technet.microsoft.com/Forums/en-US/sharepoint2010customization/thread/bab16d46-f145-4bd3-a1da-9db461fc6a8d/

    Thanks,

    Entan Ming


    Entan Ming

    TechNet Community Support

    • Marked as answer by Entan Ming Thursday, October 18, 2012 5:48 AM
    Thursday, October 11, 2012 2:17 AM
  • HI

    an easiest method, using SHP Designer

    Insert as before the DFWP.

    Using the mouse slect your columns' header

    goto source side , and youl will see that all columns are presented in a row, 

    something like

    <tr>

    <th>column1</th>....

    ...and so on...

    </tr>

    Cut this part

    Before your DFWP, insert/paste this code.


    Romeo Donca, Orange Romania (MCSE, MCITP, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    • Marked as answer by Entan Ming Thursday, October 18, 2012 5:48 AM
    Thursday, October 11, 2012 11:41 AM