How to freeze GridView header?

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 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.

Method 3

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

Method 4

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!

Method 5

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.

Method 6

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

Method 7

You may try the following sample

Freeze GridView Columns

Method 8

        <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>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x