GirdView Scrollable and Fixed Header

When using GridView .NET 2.0 Control, One of the most common requirement is to have a vertical scroll bar and a fixed header row so that the user can see what columns mean what wherever they are in the Grid and the second part of this is to select a row. The problem with the selection is, when the page posts back (if no AjaxUpdatePanel is used) the scroll position is not maintained.

GridView does not support these features by default; hence we need to use some HTML work around and javascript to achieve this.



First step is to include a vertical scroll bar.



1. Include a Div tag with overflow style and a fixed height set
2. place your Grid within the div ( Make sure you enough rows to scroll)



Code: Please include opening and closing tags...

div id="DivScroll" style="overflow: auto; height: 200px;"

asp:gridview id="“UsrGrid”…….."

asp:gridview

div



Second step is to make a selection and maintain scroll position: you can use “AutoGenerateSelectButton = true



Now, try selecting, scroll position won’t be maintained.



I saw a post in ASP.NET Forums which used this javascript. Came in very handy.



Include a hidden field on the page and set its value = 0.

input id="hdnScrollTop" runat="server" value="0" type="hidden"



Call the javascript function: SetDiv OnScroll



The div tag should look like:

div id="DivScroll" style="overflow: auto; height: 200px;" onscroll="SetDiv()"



The pretty straightforward script is: (Thanks to http://forums.asp.net/p/1019926/1378289.aspx )



script



window.onload = function(){

var strCook = document.cookie;

if(strCook.indexOf("!~")!=0){

var intS = strCook.indexOf("!~");

var intE = strCook.indexOf("~!");

var strPos = strCook.substring(intS+2,intE);

document.getElementById("DivScroll").scrollTop = strPos;

}

}



function SetDiv()

{

var intY = document.getElementById("DivScroll").scrollTop;



document.cookie = "yPos=!~" + intY + "~!";



}







Ok… Now, How to have a Fixed GridView Header. We have to use CSS. (Since GridView will be rendered as HTML Table and cells in the clientside, CSS helps a great deal here). Include a StyleSheet and have these elements. Thanks to (http://www.codeproject.com/KB/webforms/DataGridFixedHeader.aspx )



.DataGridFixedHeader

{

position: fixed;

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





}

In the GridView Element HeaderStyle Include the CSS tag



Your GridView HeaderStyle may look like



headerstyle backcolor="#6B696B" bold="True" height="33px" cssclass="DataGridFixedHeader" verticalalign="Middle" forecolor="White"



Now everything looks solid. Except I noticed that the borders for the table cells are missing, after looking around for a while this one extra CSS made it complete. Include the th tag of table (th – table header) CSS.



.DataGridFixedHeader th

{

position:relative;

border-right-width:1px;

border-right-color:White;

border-left-width:1px;

border-left-color:White;

border-top-width:1px;

border-top-color:White;

border-bottom-width:0px;

border-bottom-color:#6B696B;



}



This will do the trick and make the GridView like the below…







Thanks to ASP.NET Forums, CodeProject and Google. Hope this helps some one