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.
The above line will freeze the header row
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
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.