Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET
Article

Freeze Table Header and Columns

Rate me:
Please Sign up or sign in to vote.
3.79/5 (14 votes)
31 May 2004CPOL2 min read 173.9K   2.9K   43   14
A control to freeze table header and columns

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.

Image 1
Figure 1. The layout to position the tag and controls.
Object Name Description
divScrollbar We will use this to show horizontal scrollbar. So we can show the hidden area of tblPart2 using JavaScript and give the impression that we freeze the columns in tblPart1. This will be accomplished using JavaScript.
ASP Panel control Optional. This will be used only if you want to be able to show or hide the entire objects.
divItems This DIV will be used for vertical scrollbar so we can give impression to the user that the header is frozen. We will do this using CSS.
TABLE tag To synchronize the position of tblPart1 and tblPart2.
tblPart1 This table will be container of the freezing columns. We will generate the rows later.
divPart2 This DIV is use to clip the view of tblPart2
tblPart2 This table is like tblPart1, but some of it's columns is hidden by divPart2. This table will be scrolled horizontally by divScroller. The header and rows will be generated later.
PlaceHolder1 Act as the container for the generated rows for tblPart1.
PlaceHolder2 Act as the container for the generated header and rows for tblPart2.
Table 1. Functional description of the objects

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

JavaScript
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.

JavaScript
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;

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
Indonesia Indonesia
Irwansyah is a web developer currently using ASP.Net. Irwansyah main interests lie in developing business application framework.

Irwansyah intends to work overseas one day and explore the world till the end of the world.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey7-Feb-12 19:33
professionalManoj Kumar Choubey7-Feb-12 19:33 
GeneralDownload link Not working Pin
KirubaharanPalani23-Nov-09 19:05
KirubaharanPalani23-Nov-09 19:05 
GeneralVisit this article on freeze header/column - http://www.codeproject.com/useritems/FreezeHeader.asp Pin
Tittle Joseph10-May-06 23:01
Tittle Joseph10-May-06 23:01 
GeneralRe: Visit this article on freeze header/column - http://www.codeproject.com/useritems/FreezeHeader.asp Pin
squattyarun16-Jun-08 7:26
squattyarun16-Jun-08 7:26 
GeneralExcellant Pin
nimesh1231-Feb-06 10:03
nimesh1231-Feb-06 10:03 
GeneralNot working for me Pin
hasnainlakhani23-Jun-05 23:13
hasnainlakhani23-Jun-05 23:13 
GeneralRe: Not working for me Pin
linxuan27-Feb-06 21:03
linxuan27-Feb-06 21:03 
Generaldoesn't work for me Pin
newby7-Oct-04 5:56
newby7-Oct-04 5:56 
1) dt.Rows.Count returns 0 rows. Dataset returns all the rows but doesn't fill datatable for some reason. Example displays blank page.
2) Do you have example code using C#?
3) Do you have same example code using Datagrid instead of Datatable?

Thanks

newby
Generalgood article Pin
wu_jian8304-Jul-04 16:25
wu_jian8304-Jul-04 16:25 
GeneralRe: good article Pin
xiaofujian6-Jun-07 22:57
xiaofujian6-Jun-07 22:57 
Generalworks but jscript is slow Pin
ben551241-Jun-04 9:33
ben551241-Jun-04 9:33 
GeneralRe: works but jscript is slow Pin
Anatoly Rapoport1-Jun-04 20:07
Anatoly Rapoport1-Jun-04 20:07 
GeneralRe: works but jscript is slow Pin
irwansyah6-Jun-04 23:05
irwansyah6-Jun-04 23:05 
AnswerRe: works but jscript is slow Pin
Midi12-Sep-05 21:16
Midi12-Sep-05 21:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.