How To Freeze GridView Header While Scrolling - Code Project

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 tip. Some times we need also maintain the scroll positions while selecting any data from GridView, and quite difficult while we are using AJAX, I have written a complete article on that, hope this will help Maintain GridView Scroll Position inside updatepanel.

Uploaded by

kukawalkar

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

919 views

How To Freeze GridView Header While Scrolling - Code Project

Uploaded by

kukawalkar

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 3

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.