Search This Blog

2009-05-21

Gridview With Fixed Header

Gridview can be scrollable if it is put under a div with the overflow property.But if we scroll down the div ,the grid are go down and headeare are also go upword i.e out of the visible portion of div.
When you apply the following CSS the grid header is visble all the time i.e always in the top of the div.To do this follow the following steps.
First Create a gridview within a div which will be scrollable.
<div id="div1" runat="server"
style="overflow: scroll; width: 100%; height: 200px;">

<asp:GridView ID="GridView1" runat="server"></asp:GridView>

</div>


Create a CSS file "grid.css" within a folder "css" with a class "grid-header".The css folder is under the root directory

.grid-header
{
font-weight: bold;
font-family: Verdana;
font-size: 11px;
background-color: #7A9FCB;
text-decoration: underline;
color: #ffffff;
text-align: left;
position: relative;
top:expression(this.parentNode.parentNode.parentNode.scrollTop-2);
left:expression(this.parentNode.parentNode.parentNode.scrollLeft-1);
right:1px;
}


Call this CSS File from your page which is contain your grid


<link href="../css/grid.css" rel="stylesheet" type="text/css" />


call this css from the HeaderStyle of your gridview

<HeaderStyle CssClass="grid-header"></HeaderStyle>


Now run your application ,scroll the div to the down,you can see that the grid header is fixed all time



7 comments:

Varun Sharma said...

Thansk buddy..you really saved me lot of time by this solution...

Anonymous said...

Excellant solution...

Anonymous said...

is it possible to get a border on the cells in the header?

css border on td or th does not work

Manab Ranjan Basu said...

Sorry,As of now I didnt find the way to set the border color for this floating header.If it is normal css we can set the border.If you find any solution ,please post me that

chirag said...

it's a relay a nice solution
but it work only in Internet explorer (IE) not work in Firefox.

Manab Ranjan Basu said...

Hi Chirag,I know the problem,but as of now I didn't get any solution.I will try to find more.In the mean,if you get something, please post me

John Eric Sobrepena said...

You can also try this out. The source code and demo is in CodePlex. It supports fixed header, footer and/or pager. Works well with IE 8, Firefox 3.5 and Safari.

http://johnsobrepena.blogspot.com/2009/09/extending-aspnet-gridview-for-fixed.html