Freeze Table Header and Columns

• Download source - 19.9 Kb

Introduction

I was developing a web based application that needed a datagrid/table that can freeze its header and columns, and also have a complex that consists of merged cells. I have searched on the internet but I still can't find the one that I wanted. So, I decided to build it by my self, and thank god I made it :). And now I want to share the code with the world. This article describe how to build a table with freeze capability using built-in ASP.Net controls and some HTML tags.

Using the code

To build the freeze-able table we need to use the DIV, TABLE tag, ASP.Net Panel and PlaceHolder control and of course some javascript and CSS. You can see the layout in Figure 1.

Figure 1. The layout to position the tag and controls.

To freeze the header we can use the following CSS code:

tr.head
{
 position:relative; top: expression(document.all["divItems"].scrollTop-1); 
}

Building the horizontal scrollbar

To mimic IE scrollbar we can place a DIV tag inside a DIV tag. And resize both of them at run-time using JavaScript, this is done in ResizeTables() function.

 function ResizeTables()
 {         
  if (document.readyState)
  {  
       
   if (!document.all['divItems']) return;
   divItems.style.width = document.body.clientWidth-17;
   divItems.style.left = 0;        
       
   divPart2.style.width = document.body.clientWidth-155; 
   scroll1.style.width = divItems.style.width;
   scroll1.style.width = divItems.style.width;
   if(screen.width > 800)
    spacing1.style.width = tblPart2.offsetWidth+ tblPart1.offsetWidth;
   else
    spacing1.style.width = tblPart2.offsetWidth+ tblPart1.offsetWidth;          
           
   var AvailableHeight;
   AvailableHeight = 500;                
   divItems.style.height  = AvailableHeight;           
      
   divPart2.style.width = divItems.offsetWidth - tblPart1.offsetWidth-2;  
   
   if (parseInt(divPart2.style.width) + 
      tblPart1.offsetWidth < document.body.clientWidth )
   {  
    if (screen.width > 800)
    {              
     if(parseInt(divItems.style.height) < divPart2.offsetHeight)
     {                                                   
      divPart2.style.width = divItems.offsetWidth  -tblPart1.offsetWidth-19;
     }
    }
    else
    {
     if(parseInt(divItems.style.height) > divPart2.offsetHeight)
     {                         
      divPart2.style.width = divItems.offsetWidth -tblPart1.offsetWidth-2;
     }            
     else
     {
      divPart2.style.width = divItems.offsetWidth -tblPart1.offsetWidth-19;
     }           
    }

   }
  }
 }
 
 function OnScroll(sc)
 {  
  document.getElementById("divPart2").scrollLeft = sc.scrollLeft; 
 }         
 window.onload = ResizeTables;
 window.onresize = ResizeTables;