Freeze header and the first column of the GridView control

There have been often times when the customers (familiar with Excel Freeze Options) have asked for the same functionality on ASP .NET forms.

There is no direct property that would allow users to either fix the header or the column. The html concept of was hard to find with GridView control.

We found a solution that used stylesheet to freeze the header and the columns. This code really helped us achieve our goals.

Here it is...

Place your gridview under DIV. This div should contains style value as

style="height:500px; width:100%; overflow:auto;"

overflow:auto: to display the scroll bars when grid contents exceeds the grid height

Instead of hard coding div height if you need to apply the height as the page height you can refer to the following article, http://inogic.blogspot.com/2009/02/automatically-resize-iframe-to-adjust.html

In gridview header provide class name from stylesheet i.e. Freezing

< cssclass="FreezeHeader" id="”">
The above line will freeze the header row

To freeze the first column use below code for first column at run time

gvFix.HeaderRow.Cells[0].CssClass = "locked";

foreach (GridViewRow row in gvFix.Rows)

{ //stylesheet to firstcol

row.Cells[0].CssClass = "locked";

}

Here are the Stylesheet classes that are being referred above

/* Locks the left column */

td.locked, th.locked {

position:relative;

cursor: default;

left: expression(document.getElementById("div_gridholder").scrollLeft); /* div_gridholder : name of the div which holds gridview*/

}

/* Locks the header */

.FreezeHeader {

position:relative ;

top:expression(this.offsetParent.scrollTop - 2);

z-index: 20;

}

Hope this helps others give the option of Freezing rows and columns in grid controls.