ASP.NET - Freeze Header for GridView - Asked By Naresh Kumar on 03-Mar-10 06:21 AM

Hi All,

I am using Gridview to display the results, Can any one please help me how to Freeze header when users scroll down they always see the header row at the top of each column.

I had tried with the third party gridview, I am getting the Scrollbar in the Gridview but the header was not fixed.
http://aspnetrealworldcontr.codeplex.com/SourceControl/changeset/view/9547#43959.

Thanks in advance.
Kirtan Patel replied to Naresh Kumar on 03-Mar-10 06:40 AM
you can use JavaScript to Float your Header row By Putting thos Header Rowinto <Div> tag ..

and use Below JavaScript

Customization Instructions

1) Put your content in place of the "<b>Your Content Here</b>" content
2) Change JSFX_FloatDiv("divTopLeft", 10 ,30).floatIt(); where
3)is the x-coordinate of the Row(distance from left of window)
4) is the y-coordinate of the Row(distance from right of window)


<div id="divTopLeft"     style="position:absolute">
<!-- Start - put your content here --->
<b>Your Content Here</b>
<!-- End   - put your content here --->
</div>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: Consolas, "Courier New", Courier, Monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }
<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
    var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
    var px = document.layers ? "" : "px";
    window[id + "_obj"] = el;
    if(d.layers)el.style=el;
    el.cx = el.sx = sx;el.cy = el.sy = sy;
    el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

    el.floatIt=function()
    {
        var pX, pY;
        pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
        document.documentElement && document.documentElement.clientWidth ?
        document.documentElement.clientWidth : document.body.clientWidth;
        pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
        document.documentElement.scrollTop : document.body.scrollTop;
        if(this.sy<0)
        pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
        document.documentElement.clientHeight : document.body.clientHeight;
        this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
        this.sP(this.cx, this.cy);
        setTimeout(this.id + "_obj.floatIt()", 40);
    }
    return el;
}
JSFX_FloatDiv("divTopLeft", 10,30).floatIt();
</script>
Adam Houldsworth replied to Naresh Kumar on 03-Mar-10 06:45 AM
Hi,

A solution using CSS on the ASP.NET GridView (http://forums.asp.net/t/1077704.aspx):

Freeze Header:
1. Define class .Freezing in Stylesheet:

.Freezing
{
   position:relative ;
   top:expression(this.offsetParent.scrollTop);
   z-index: 10;
}
2. Assign Datagrid Header's cssClass to Freezing
<HeaderStyle ... CssClass= "Freezing" ...></HeaderStyle>

3. You are done!

Naresh Kumar replied to Adam Houldsworth on 03-Mar-10 06:58 AM
Thanks for the reply,

Its not working in Mozilla, IE8 also.
John Smith replied to Naresh Kumar on 03-Mar-10 07:16 AM
You can use frames for this or you can use alwaysvisiblecontrol of AJAX to achieve this.

Source: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AlwaysVisibleControl/AlwaysVisibleControl.aspx
Adam Houldsworth replied to Naresh Kumar on 03-Mar-10 07:34 AM
Due to the special CSS usage, its limited only to IE - presumably not IE8, but I'd suspect it would work if you use compatibility mode.

I would go for the previous reply as your solution then, there are no Mozilla alternatives for the CSS route that I am aware of.
Adam Houldsworth replied to Naresh Kumar on 03-Mar-10 07:45 AM
This is not an uncommon problem, but unfortunately its not simple to solve.  Various solutions exist that you can reuse.

These use client-side extenders and AJAX:
http://weblogs.asp.net/dwahlin/archive/2007/07/31/freeze-asp-net-gridview-headers-by-creating-client-side-extenders.aspx
http://johnsobrepena.blogspot.com/2009/09/extending-aspnet-gridview-for-fixed.html

These ones use CSS and JavaScript:
http://www.vbknowledgebase.com/?Id=91&Desc=Freeze-GridView-Columns-and-Headers-in-ASP.Net-CSS
http://www.codeproject.com/KB/webforms/FrozenGridHeader.aspx

Hopefully you will find these useful.  I didn't transpose the post into here because they are all quite large.

HTH,

Adam
Naresh Kumar replied to Kirtan Patel on 03-Mar-10 08:13 AM
Thanks for the code,

I have tried but how can I adjust the column width of the header as the column width is not static as it changes with the td content of the rows.Right now I have added the header row inside the DIV.

Is there any way to place the Gridview Header in the Div.

Please reply me as you have any ideas.

Naresh Kumar replied to Adam Houldsworth on 03-Mar-10 08:34 AM
Thanks for the references adam ,

I have tried with this
http://johnsobrepena.blogspot.com/2009/09/extending-aspnet-gridview-for-fixed.html
I am able to scroll the Gridview vertically but the header is not freezing.

Ok I will try for this.




Bob replied to Naresh Kumar on 17-Mar-10 01:56 PM
Hey there,

I have a really simple solution for this using basic CSS and a little jQuery. It even allows the user to turn the locking header on and off at will.

Check it out: http://www.bobthegeek.com/?p=12

The actual project I implemented this with is actually an asp.net project using the GridView control. Works like a charm.

Let me know if you have any questions.

Bob
Freeze Header for GridView in window application - jayshree replied to Kirtan Patel on 01-Apr-10 03:06 AM
end of post