Fixed/Floating Grid Header for ASP.NET GridView

Fixed/Floating Grid Header for ASP.NET GridView
This solution ONLY works in IE 7/8 as it uses DHTML (not firefox, chrome, etc), but it is much, much simpler than the other solutions out there, and it works for any size grid. Other browsers will simply ignore this code. If your users are using IE 7/8, this is a good solution...
Some of the other solutions require you to size your grid a fixed size, or put it in a panel of fixed size, or put it at a specified spot on your page.
This has none of those constraints.
However, the grid must be near the bottom of your page and not have too much stuff below it; otherwise you'd need to modify this with another check in the CSS to -stop- moving the header if the user scrolls past the grid. (check the height of the object etc...)

> > > >

Apply this style/css class to the grid itself (via skin or class):

.Grid
{
position:relative; /* this is required so that the grid's offsetTop, etc properties return non-zero values to calculate floating headers. */
}

Apply this style to the grid's HeaderStyle object (via skin or class):

/* This GridHeaderFixed class can be used to fix grid headers so they are floating. */
.GridHeaderFixed TH
{
padding: 3px;
text-align: left;
background-color:#EAEFFF;
border-width:1px;
position:relative;
top:expression(this.parentNode.parentNode.parentNode.offsetParent.scrollTop > this.parentNode.parentNode.parentNode.offsetTop + 2 ? this.parentNode.parentNode.parentNode.offsetParent.scrollTop - this.parentNode.parentNode.parentNode.offsetTop - 2 : 0);
z-index: 10;
}

Note the "2" in the code above is because I have a border of size 1 around the cells.

That's it!

Note: The reason for all the "parentNodes" is because I couldn't get an accurate position value using the TH cell itself, so I went up the tree to the TABLE object. There may be a simpler way to write this and have it still work. Post if you can get it working with less code!

Created By: amos 6/9/2011 2:23:52 PM
Updated: 3/11/2013 6:23:06 PM