Click here to Skip to main content
15,867,704 members
Articles / Web Development / ASP.NET
Tip/Trick

How to Freeze GridView Header While Scrolling ?

Rate me:
Please Sign up or sign in to vote.
3.73/5 (15 votes)
13 Sep 2009CPOL 148.5K   21   20
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);  z-index: 10;  }   .HeaderFr
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. .HeaderFreez  
  2. {  
  3. position:relative ;   
  4. top:expression(this.offsetParent.scrollTop);  
  5. z-index10;  
  6. }   
.HeaderFreez
{
position:relative ;
top:expression(this.offsetParent.scrollTop);
z-index: 10;
}

Step 2 Set Gridview’s HeaderStyle CssClass as follows
CssClass="HeaderFreez"
That’s 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
India India
.NET Consultant | Former Microsoft MVP - ASP.NET | CodeProject MVP, Mentor, Insiders| Technology Evangelist | Author | Speaker | Geek | Blogger | Husband

Blog : http://abhijitjana.net
Web Site : http://dailydotnettips.com
Twitter : @AbhijitJana
My Kinect Book : Kinect for Windows SDK Programming Guide

Comments and Discussions

 
QuestionFreeze GridView Header While Scrolling Pin
Member 1553812516-Feb-22 20:49
Member 1553812516-Feb-22 20:49 
GeneralMy vote of 1 Pin
Member 102429546-Jan-15 0:02
Member 102429546-Jan-15 0:02 
Questionnot working Pin
OmarKamel21-Dec-14 5:22
OmarKamel21-Dec-14 5:22 
GeneralMy vote of 5 Pin
mandeep tondak25-Nov-12 20:08
mandeep tondak25-Nov-12 20:08 
QuestionRequest for coming with more serious article like Desig pattern Pin
Tridip Bhattacharjee16-Apr-12 21:16
professionalTridip Bhattacharjee16-Apr-12 21:16 
GeneralReally helpfull Pin
Pranay Rana14-Mar-10 21:27
professionalPranay Rana14-Mar-10 21:27 
GeneralRe: Really helpfull Pin
Abhijit Jana14-Mar-10 21:35
professionalAbhijit Jana14-Mar-10 21:35 
GeneralRe: Really helpfull Pin
Pranay Rana14-Mar-10 21:41
professionalPranay Rana14-Mar-10 21:41 
GeneralRe: Really helpfull Pin
Abhijit Jana14-Mar-10 21:45
professionalAbhijit Jana14-Mar-10 21:45 
GeneralRe: Really helpfull Pin
Pranay Rana14-Mar-10 22:49
professionalPranay Rana14-Mar-10 22:49 
GeneralRe: Really helpfull Pin
Abhijit Jana15-Mar-10 0:06
professionalAbhijit Jana15-Mar-10 0:06 
GeneralRe: Really helpfull Pin
Pranay Rana15-Mar-10 0:45
professionalPranay Rana15-Mar-10 0:45 
GeneralRe: Really helpfull Pin
Abhijit Jana15-Mar-10 2:11
professionalAbhijit Jana15-Mar-10 2:11 
GeneralRe: Really helpfull Pin
Pranay Rana15-Mar-10 23:46
professionalPranay Rana15-Mar-10 23:46 
Generalisse when scrolling horizontal Pin
Pranay Rana14-Mar-10 20:11
professionalPranay Rana14-Mar-10 20:11 
GeneralRe: isse when scrolling horizontal Pin
Abhijit Jana14-Mar-10 20:32
professionalAbhijit Jana14-Mar-10 20:32 
GeneralRe: isse when scrolling horizontal Pin
Pranay Rana14-Mar-10 20:37
professionalPranay Rana14-Mar-10 20:37 
GeneralRe: isse when scrolling horizontal Pin
Abhijit Jana14-Mar-10 20:43
professionalAbhijit Jana14-Mar-10 20:43 
GeneralRe: isse when scrolling horizontal Pin
Abhijit Jana14-Mar-10 21:10
professionalAbhijit Jana14-Mar-10 21:10 
Pranay,
You can have a look into this also.
Grid View with fixed header[^]
Cheers !
Abhijit
Codeproject MVP

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.