Scroll

Sticky column headers for long grids

Follow
Summary This article describes how to fix your header row for your long grids, so when you scroll down you won't lose sight of the header on the top in askiadesign by using javascript/jQuery.
Applies to askiadesign
Written for Scriptwriters and survey authors
Keywords header; grid; script; javascript; jquery; design; askiadesign

Many times you want to fix your header row for your long grids, so when you scroll down you won't lose sight of the header on the top. With a few simple steps and a jQuery snippet you can achieve this.

  • Make sure you are using a response block.
  • Add in a script below your response block in the screen mode.
<script type="text/javascript" src="??ResPath??jquery.fixedtableheader-1-0-2.min.js"></script>
<script type="text/javascript" src="??ResPath??jquery-migrate-1.2.1.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
	id_tableau= "#headerfix" ; 
	/*formattage du tableau*/ 
	$(id_tableau).find("tr:first").wrap("<thead>"); 
	$(id_tableau).find("thead:first").prependTo($(id_tableau)); 
	$(id_tableau).find("tr:first td").each(function(){ 
	   contenttd = $(this).html(); 
	   widthtd = $(this).width();
	   classtd = $(this).attr("class");
	   styletd = $(this).attr("style");
	   idtd = $(this).attr("id");
	   $(this).replaceWith("<th width='" + widthtd + "' class='" + classtd + "' style='" + styletd + "' id='" + idtd + "'>" + contenttd + "</th>"); }); $(id_tableau).fixedtableheader(); }); </script>
  • Download the FixedHeader.zip file here and you will find the jQuery script files inside. Please place this file in your Resource folder.
  • Make sure your test path is set correctly so you can test it locally.
Have more questions? Submit a request

Comments