Scrollable GridView

// JScript file original by PTK from developer.com
// this code was re-written by J.Stacey to suit different needs.
// please see the code documentation supplied with this file for it's proper use.
function InitializeFixedHeader(id)
{
    //debugger;      
    var pc = new PositionClass();
    pc.SetClientID(id);
    
    window.onload = pc.SavePosition;    
    window.onresize = function()
       {
          //debugger;
          pc.SavePosition();
       }
}
   
// JScript File - by PTK
// Implements a fixed header for HTML tables (like a GridView,
// which renders and HTML table)
// re-written by J.Stacey to suit different needs.

function PositionClass()
{
   //debugger;
   this.Top          = top;
   this.Left         = left;
   this.Width        = width;
   this.Height       = height;
   this.ClientID     = clientID;
   this.SavePosition = savePosition;   
   this.SetClientID  = setClientID;
   var top, left, width, height, clientID;
   var head, caption;

   // the client ID of the table/gridview
   function setClientID(id)
   {
     // debugger;
      clientID = id;
   }

   // determines the absolute position of X or Y--determined by
   // the getOffset function to handle control nesting
   function getAbsolutePosition(control, getOffset, adjustCaption)
   {
      //debugger;
      var result = 0;
      while(control)
      {
         if(control.tagName)
            if((control.tagName == "TBODY") ||
               (control.tagName == "TR"))
            {
               if(control.parentElement)
                  control = control.parentElement;
               else
                  break;
               continue;
            }

         if(control.style.position == "absolute")
            return result;

         result += getOffset(control);

         if(control.parentElement)
            control = control.parentElement;
         else
            break;
      }

      if(adjustCaption && caption && isAlignedTop(caption))
         result -= caption.clientHeight;
         //debugger;
      return result;
   }

   // returns the x offset
   function getXOffset(control)
   {
      //debugger;
      if(control.offsetLeft)
         return control.offsetLeft;
      else
         return 0;
   }

   // returns the y offset
   function getYOffset(control)
   {
      //debugger;
      if(control.offsetTop)
         return control.offsetTop;
      else
         return 0;
   }

   // get the grid header row. It may not exist or there may be a
   // caption above it
   function getHeaderNode(grid)
   {
      //debugger;
      if(!grid) return null;
      var tempStr = new String();
      tempStr = grid.rows.length;
      for(var i=0; i<grid.rows.length; i++)
      {
         var s = new String();
         if(grid.rows[i].childNodes.length > 0)
         {
            s = grid.rows[i].childNodes[0].tagName;
            if(s.toLowerCase() == "th")
               return grid.rows[i];
         }
      }
      return null;
   }

   // everything but "bottom" is top=aligned
   function isAlignedTop(theCaption)
   {
      //debugger;
      if(!theCaption) return false;
      var tag = theCaption.align.toLowerCase();
      return (tag == "top") || (tag == "left") || (tag == "right")
         || (tag == "");
   }

   // find the caption; we have to allow for a caption above the
   // header
   function getCaptionNode(grid)
   {
      //debugger;
      if(!grid) return null;
      return grid.caption;
   }

   // stores the current position of the control
   function savePosition()
   {
      //debugger;
      // get the grid
      var grid = document.all[clientID];
      if(!grid) return;
      // creating the new header *******
      header.cellPadding = grid.cellPadding;
      header.cellSpacing = grid.cellSpacing;
      header.border      = grid.border;
      header.bgColor     = grid.bgColor;
      var temstr = new String();
      temstr = grid.className
      header.className   = grid.className;
      
      caption = getCaptionNode(grid);
      if(caption && (caption.style.backgroundColor == ""))
      {
          //debugger;
         caption.style.backgroundColor = "white";
      }
      head = getHeaderNode(grid);
      if(head == null) return;
      head.style.visibility = "hidden";
      // get the header position
      top      =  getAbsolutePosition(head, getYOffset, true) +290;
      left     =  getAbsolutePosition(head, getXOffset, false);
      width    = 100 //head.clientWidth; // note that I used this for specified location, this can be modified to suit your needs
      height   = 80 //head.clientHeight;
      var temp = head.cloneNode(true);
      // store sizes in style attributes
      for(var i=0; i<head.childNodes.length; i++)
      {
         temp.childNodes[i].style.width =
            head.childNodes[i].clientWidth;
         temp.childNodes[i].style.height =
            head.childNodes[i].clientHeight;
      }
      head = temp;
      // clone the header
      head.style.visibility = "visible";
      // insert the header (and caption) into our copy table
      if(caption && isAlignedTop(caption))
      {
         var newCaption = aption.cloneNode(true);
         if(header.caption)
            header.replaceChild(newCaption, header.caption);
         else
            header.appendChild(newCaption);
         caption.style.visibility = "hidden";
      }  
      // place the new table header in the table-playing header      
      var th = getHeaderNode(header);
      if(th)
         header.childNodes[0].replaceChild(head, th);
      else
         header.childNodes[0].appendChild(head);
       //debugger;      
      // fix the position of the div to overlap the gridview's header           
      GridviewDiv.style.posLeft    = left;
      GridviewDiv.style.left       = left + "px";
      GridviewDiv.style.posTop     = top ;
      GridviewDiv.style.top        = top  + "px" ;
      GridviewDiv.style.width      = width + "%";
      GridviewDiv.style.height     = height + "%";
      GridviewDiv.style.visibility = "visible";
      GridviewDiv.style.zIndex     = 0;  
   }
}