Click here to Skip to main content
Click here to Skip to main content

How to Freeze GridView Header While Scrolling ?

By , 13 Sep 2009
Rate this:
Please Sign up or sign in to vote.
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. }   

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)

About the Author

Abhijit Jana
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
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermandeep tondak25-Nov-12 20:08 
QuestionRequest for coming with more serious article like Desig pattern PinmemberTridip Bhattacharjee16-Apr-12 21:16 
GeneralReally helpfull PinmemberPranay Rana14-Mar-10 21:27 
GeneralRe: Really helpfull PinmvpAbhijit Jana14-Mar-10 21:35 
GeneralRe: Really helpfull PinmemberPranay Rana14-Mar-10 21:41 
GeneralRe: Really helpfull PinmvpAbhijit Jana14-Mar-10 21:45 
GeneralRe: Really helpfull PinmemberPranay Rana14-Mar-10 22:49 
hi abhijit,
 
Thanks for the asking question becuase i got to know that expression is some thing where you can write your javascript code and save effort of writing long javascript.
 
top: expression(document.getElementById("AdjResultsDiv").scrollTop-2);
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
 
Above line of code Gives the Top and Left coordinates of the TH tag which will be generated for the Header inside the Grid. We are using the expression tag to dynamically assign the values through JavaScript.
 
and For more deatil dom is
 
parentNode.parentNode.parentNode.parentNode.scrollLeft
=
parentNode- divgridpanel
parentNode- div
parentNode- table
parentNode- tr
GeneralRe: Really helpfull PinmvpAbhijit Jana15-Mar-10 0:06 
GeneralRe: Really helpfull PinmemberPranay Rana15-Mar-10 0:45 
GeneralRe: Really helpfull PinmvpAbhijit Jana15-Mar-10 2:11 
GeneralRe: Really helpfull PinmemberPranay Rana15-Mar-10 23:46 
Generalisse when scrolling horizontal PinmemberPranay Rana14-Mar-10 20:11 
GeneralRe: isse when scrolling horizontal PinmvpAbhijit Jana14-Mar-10 20:32 
GeneralRe: isse when scrolling horizontal PinmemberPranay Rana14-Mar-10 20:37 
GeneralRe: isse when scrolling horizontal PinmvpAbhijit Jana14-Mar-10 20:43 
GeneralRe: isse when scrolling horizontal PinmvpAbhijit Jana14-Mar-10 21:10 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 13 Sep 2009
Article Copyright 2009 by Abhijit Jana
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid