How to freeze GridView header?

Question

As in a title, does anyone know how to freeze GridView header in ASP.NET ?

You can check [this](http://stackoverflow.com/questions/130564/i-need-my-html-tables-body-to-scroll-and-its-head-to-stay-put) question. — Atanas Korchev, Oct 01 '08 at 20:21

score 4 · Answer 1 · answered Oct 01 '08 at 13:29

4

You can do it in the css

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

answered Oct 01 '08 at 13:29

Galwegian

41,475
16
112
158

3

But it seems to work only under IE and not under FF :( Anyway, thanks! :) – rafek Oct 02 '08 at 06:13
More specifically, expressions don't work in IE8 Standards mode. – EricLaw Mar 03 '10 at 07:26

score 2 · Answer 2 · edited Sep 25 '12 at 13:51

I think I have solution of this. please see below javascript code

<script type="text/javascript" language="javascript">
    var orgTop = 0;
    $(document).scroll(function () {
        var id = $("tr:.header").get(0);
        var offset = $(id).offset();
        var elPosition = $(id).position();
        var elWidth = $(id).width();
        var elHeight = $(id).height();
        if (orgTop == 0) {
            orgTop = elPosition.top;
        }
        if ($(window).scrollTop() <= orgTop) {
            id.style.position = 'relative';
            id.style.top = 'auto';
            id.style.width = 'auto';
            id.style.height = 'auto';
        }
        else {
            id.style.position = 'absolute';
            id.style.top = $(window).scrollTop() + 'px';
            id.style.width = elWidth + 'px';
            id.style.height = elHeight + 'px';

        }
    });
</script>

where .header is the css class of your Grid header.

Just add this script on the page and replace header with the css class name you have used for your header.

score 2 · Accepted Answer · answered Oct 01 '08 at 13:23

2

Option (a) buy into a UI package that includes a souped-up GridView with this functionality built-in.

Option (b) roll your own - it's not simple. Dino Esposito has one approach.

EDIT: Just noticed that the Dino article links to a subscriber-only area on the ASPnetPro magazine site.

Here's another approach using extenders.

answered Oct 01 '08 at 13:23

Herb Caudill

50,043
39
124
173

How to freeze if the header is consist of a main header and number of sub headers? – bonCodigo Sep 02 '14 at 07:00
@bonCodigo - you'll probably get better responses to your question if you post it as a separate question. In this case you're likely not using an ASP.NET GridView, right? – Herb Caudill Sep 02 '14 at 15:44
I have gridviews in the web application. Due to maintaining server side responses, we just have to stick to gridview. The biggest challenge is the sub headers. Worst case, we plan to put the headers in an html and hide the headers from gridview. But then, I have a bad feeling that DML/CRUD will not perform well. – bonCodigo Sep 03 '14 at 02:06

score 2 · Answer 4 · answered Feb 04 '10 at 16:44

Try this open-source project for ASP.NET. It extends GridView to provide fixed header, footer and pager and resizable column width. Works well in IE 6/7/8, Firefox 3.0/3.5, Chrome and Safari.

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

score 2 · Answer 5 · answered Nov 12 '11 at 03:39

I too faced a similar issue while developing in the web applications in Asp.Net 2.0 / 3.5.

One fine day, I came across IdeaSparks ASP.NET CoolControls. It helps to display fix column headers, footer and pager.

I used them personally and I really loved it!

To check the control click here : IdeaSparks ASP.NET CoolControls

Hope this helps!

score 1 · Answer 6 · answered Jul 28 '10 at 07:53

1

You may try the following sample

Freeze GridView Columns

answered Jul 28 '10 at 07:53

Pon Saravanan

525
5
12

score 1 · Answer 7 · answered Jan 13 '09 at 07:49

1

Give this a try should solve the problem http://www.codeproject.com/KB/webforms/FreezePaneDatagrid.aspx

answered Jan 13 '09 at 07:49

rsapru

688
14
30

score 0 · Answer 8 · answered May 30 '21 at 06:27

        <script src="Scripts/jquery-1.7.1.js"></script>
        <script language="javascript" >
            $(document).ready(function () {
                var gridHeader = $('#<%=GridView1.ClientID%>').clone(true); // Here Clone Copy of Gridview with style
                $(gridHeader).find("tr:gt(0)").remove(); // Here remove all rows except first row (header row)
                $('#<%=GridView1.ClientID%> tr th').each(function (i) {
                    // Here Set Width of each th from gridview to new table(clone table) th 
                    $("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
                });
                $("#GHead").append(gridHeader);
                $('#GHead').css('position', 'absolute');
                $('#GHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
        
            });
        </script>
    




            <h3>Scrollable Gridview with fixed header in ASP.NET</h3>
            <br />
            <div style="width:550px;">
                <div id="GHead"></div> 
                <%-- This GHead is added for Store Gridview Header  --%>
                <div style="height:300px; overflow:auto">
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
                        CellPadding="5" HeaderStyle-BackColor="#f3f3f3">
                        <Columns>
                            <asp:BoundField HeaderText="ID" DataField="StateID" />
                            <asp:BoundField HeaderText="Country" DataField="Country" />
                            <asp:BoundField HeaderText="StateName" DataField="StateName" />
                        </Columns>
                    </asp:GridView>
                </div>
            </div>

How to freeze GridView header?

8 Answers8

Linked