Thursday, April 21, 2016

Freeze pane on SharePoint list

In case of a larger SharePoint list, end-users may appreciate that the header row remains in the visible area while they scroll through the list. Out-of-the-box the SharePoint XsltListView webpart does not provide this functionality. However, it is possible to augment the standard behavior by modifying the rendered HTML through javascript. There are multiple examples published, but for some reason these did not immediate work for me. Did get me inspired though, and I coded a jQuery-snippet that when inserted in a page containing a XsltListView webpart delivers the 'freeze pane':
<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var $table = $(".ms-listviewtable").first().data("summary", "<listview name>"); // WRAP TABLE IN SCROLL PANE $("#s4-workspace").css( { overflow: 'hidden' } ); $table.wrap("<DIV class='FreezedLV' style='OVERFLOW: auto; HEIGHT: 550px;'></DIV>"); // FROZEN HEADER ROW $(".FreezedLV").wrap("<DIV class='FreezedLVContainer'></DIV>"); $("<table id='FreezedTR' class='ms-listviewtable' cellPadding='1' cellSpacing='0'></table>"). insertBefore(".FreezedLV"); $("#FreezedTR").width($table.width() + "px"); var $origHeader = $("TR.ms-viewheadertr:first", $table); var $firstRowTable = $("TR.ms-itmhover:first", $table); var $freezeHeader = $origHeader.clone(); // Propagate the computed width of columns of origheader to freezeheader $origHeader.children("th").each(function() { var width = $(this).width(); var ownerIndex = $(this).index(); $($freezeHeader.children("th")[ownerIndex]).width(width + "px"); }); // Propagate the implicit width of row columns as explicit widths in first row to // avoid layout-changes when hiding the original header $firstRowTable.children("td").each(function() { var width = $(this).width(); var ownerIndex = $(this).index(); $($firstRowTable.children("td")[ownerIndex]).width(width + "px"); }); $("#FreezedTR").append($freezeHeader); $origHeader.hide(); }); </script>

4 comments:

  1. Hiya,

    This works quite well, accept for it seems to kill off the horizontal scroll bar at the bottom of the page. Do you know why that might be?

    Chris

    ReplyDelete
  2. Hi Chris,

    This is due the unconditional hide of the page scrollbars, vertical + horizontal.
    Suggest to look at update of this post and freezePane code, in which I've dealt with that, at the extent of slightly more complex code setup:
    http://williamvanstrien.blogspot.nl/2016/07/scrollheight-of-children-influences.html

    ReplyDelete
  3. Hi William,

    I am looking to insert a 'frozen text box' on a SP front page (similar to those chat boxes you see on many service websites), where it is relatively easy for site owners to add and edit simple text (with no coding experience). Do you have any suggestions for me on how to go about this?

    thanks a bunch,
    Mia

    ReplyDelete
    Replies
    1. Hi Mia,
      Utilize CSS3. I suggest usage of Div's, and to include the text box in an absolute positioned Div, with z-order set to show above the content below it.
      A quick search gives multiple useful snippets, eg https://stackoverflow.com/questions/7576342/css-to-keep-element-at-fixed-position-on-screen

      Delete