Freezing Headers/Columns in a Scrollable DataGrid

• Posted by justin on September 28, 2005
• 0 comments

Interesting article on how to implement freezing the headers/columns in a Datagrid like you can in excel.  This solution however only works in IE 5+ because it uses the CSS expression stuff.

http://www.richardxin.com/FreezeHeader.aspx

Excerpt of article

Freeze Header

.Freezing
{
   position:relative ;
   top:expression(this.offsetParent.scrollTop);
   z-index: 10;
}

<HeaderStyle ... CssClass= "Freezing" ...></HeaderStyle>

Freezing Columns

.FreezingCol
{
   LEFT: expression(document.getElementById("freezingDiv").scrollLeft);
   /*freezingDiv is the name of the div to make your datagrid scrollable */ 
   POSITION: relative;
   z-index: 1;
}  
 
e.Item.Cells(0).CssClass = "FreezingCol"
e.Item.Cells(1).CssClass = "FreezingCol"