How to Freeze GridView Header While Scrolling ?

Abhijit Jana This is very common problem in Web development that we need tofreeze the GridView header at the time of scrolling, Here is one simpletips:Step 1 : Create a CSS class as following .HeaderFreez { position:relative ; top:expression(this.offsetParent.scrollTop); zindex: 10; } .HeaderFr See more: C# ASP.NET Dev Beginner This is very common problem in Web development that we need to freeze the GridView header at the time of scrolling, Here is one simple tips: Step 1 : Create a CSS class as following 1. 2. 3. 4. 5. 6. 7. 8. .HeaderFreez { position:relative ; top:expression(this.offsetParent.scrollTop); z-index: 10; }

Step 2 Set Gridviews HeaderStyle CssClass as follows

CssClass="HeaderFreez"
Thats all. Some times we need also maintain the scroll positions while selecting any data from GridView, and quite difficult to maintain the position while we are using AJAX, I have written a complete article on that, hope this will help Maintain GridView Scroll Position inside updatepanel

Posted 13 Sep '09 Abhijit Jana 124K

Alternate 1
This thing is working for both horizontal and verticle scrolling.

Vote

j j j j j k k k k k l l l l l m m m m m n n n n n

Vote

Here id of the div is hard coded but you can use jquery to attach css class to div element.

div#gridPanel { width:900px; overflow:scroll; position:relative; }

div#gridPanel th { top: expression(document.getElementById("gridPanel").scrollTop-2); left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); position: relative; z-index: 20; }

aspx code

<asp:Panel ID="gridPanel" runat="server" Height="200px" Width="100px" ScrollBars="Auto"> asp.net grid view </asp:Panel>

Posted 15 Mar '10 Pranay Rana 17.3K Comments

Edited 15 Mar '10 v5

Permalink

Xmen W.K. - 9 Sep '10 You should rewrite your aspx code( encode html )

Alternate 2

Vote

j j j j j k k k k k l l l l l m m m m m n n n n n

Vote

<asp:Panel ID="gridPanel" runat="server" Height="200px" Width="100px" ScrollBars="Auto"> asp.net grid view

Posted 8 Sep '10 prasghant 306 Comments

Permalink

Ankur\m/ - 13 Jul '11 Reason for my vote of 1 How was that approved? There is no appropriate content in it if you read what the tip is for. C lick 'Improve Alternate' and add a proper alternate and I will reconsider my vote. Ankur\m/ - 13 Jul '11 BTW the tip is for freezing the HEADER columns of a GridView.

Toniyo Jackson - 13 Jul '11 Reason for my vote of 1 There is so much difference between freeze and scroll. Its not an alternate answer

This content, along with any associated source code and files, is licensed under The C ode Project Open License (C POL)

Discussions and Feedback

14 messages have been posted for this entry Visit http://www.codeproject.com/Tips/42322/How-to-Freeze-GridView-Header-While-Scrolling to post and view comments on this entry, or click here to get a print view with messages.

A dvertis e | P rivac y | M obile Web0 2 | 2 .3 .1 1 0 7 2 6 .1

C opyright C odeP rojec t, 1 9 9 9 - 2 0 1 1 A ll Rights Res erved. T erms of U s e