How to Freeze GridView Header While Scrolling ? - CodeProject

Click here to Skip to main content

Click here to Skip to main content

Tip

Alternatives (2)

Comments & Discussions (17)

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

.HeaderFreez
{
position:relative ;
top:expression(this.offsetParent.scrollTop);
z-index: 10;
}

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

About the Author

Abhijit Jana

Software Developer (Senior)

India

Member

Follow on Twitter

Follow on Twitter

.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

Sign Up to vote

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board.

Search this forum
	Profile popups Spacing Noise Layout Per page

My vote of 5

25 Nov '12 - 20:08

thank you it is working for me.. thank s
Sign In·View Thread·Permalink

Not Working...

24 May '12 - 21:15

Hi Sir, this style is not working for me. I'm using Chrome as Browser. please help me out with this. Regards, Sunny K
Sign In·View Thread·Permalink

Request for coming with more serious article like Desig pattern

Tridip Bhattacharjee

16 Apr '12 - 21:16

it will be helpful for all the daily reader of codeproject if you come with more serious article like Desig pattern (MVC,MVP,MVVM), IOC,DI etc for real life implementation. thanks tbhattacharjee
Sign In·View Thread·Permalink

Really helpfull

14 Mar '10 - 21:27

hi abhijit, Thanks for the help i got solution by the article sent by you i just added alternate in your answer which is working fine at my end.
Sign In·View Thread·Permalink

Re: Really helpfull

14 Mar '10 - 21:35

Thanks Pranay, Nice to see ! Can you please tell me, what is the use of line, `left:expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);` Cheers ! Abhijit Codeproject MVP
Sign In·View Thread·Permalink

Re: Really helpfull

14 Mar '10 - 21:41

hi abhijit, i am also searching for this because i have no idea about this line of code. i will get back to you soon as i get information about this.
Sign In·View Thread·Permalink

Re: Really helpfull

14 Mar '10 - 21:45

Pranay Rana wrote:
i am also searching for this because i have no idea about this line of code.

Then how can you post this as an alternative solution ? Smile | :)

Smile | :)

Pranay Rana wrote:
i will get back to you soon as i get information about this.
Quote Selected Text

Yes, sure. Smile | :)

Smile | :)

Cheers !
Abhijit
Codeproject MVP

Re: Really helpfull

14 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

Re: Really helpfull

15 Mar '10 - 0:06

Have you checked the my sample article ? Cheers ! Abhijit Codeproject MVP
Sign In·View Thread·Permalink

Re: Really helpfull

15 Mar '10 - 0:45

Sorry to say you but i cannt have facility to download code in my comp. so i haven't tried that.
Sign In·View Thread·Permalink

Re: Really helpfull

15 Mar '10 - 2:11

Pranay Rana wrote: but i cannt have facility to download code in my comp. Hmmm I guess you are talking about Office PC. Try it in your home. That sample is working fine. Cheers ! Abhijit Codeproject MVP
Sign In·View Thread·Permalink

Re: Really helpfull

15 Mar '10 - 23:46

yes but i really need to thank you because after this i learn new thing that you can assign expression in css.
Sign In·View Thread·Permalink

isse when scrolling horizontal

14 Mar '10 - 20:11

Header remain fix even we scroll horizontal , i think it should movable when scrolling horizontal and fix when scrolling verticle
Sign In·View Thread·Permalink

Re: isse when scrolling horizontal

14 Mar '10 - 20:32

Pranay Rana wrote: Header remain fix even we scroll horizontal , i think it should movable when scrolling horizontal and fix when scrolling verticle Pranay, I didn't get your point. Can you please rephrase your sentence again ? Cheers ! Abhijit Codeproject MVP
Sign In·View Thread·Permalink

Re: isse when scrolling horizontal

14 Mar '10 - 20:37

its good that header row remain fix when you are going to scroll grid vertically means if more no of records avaialble than the hegiht. But header row is remain fix also when i am scrolling horizontally means if the no of the column is more than the width of the div element. i need header row must be movable when i scroll horizontal.
Sign In·View Thread·Permalink

Re: isse when scrolling horizontal

14 Mar '10 - 20:43

I got your point Pranay.

Pranay Rana wrote:
But header row is remain fix also when i am scrolling horizontally means if the no of the column is more than the width of the div element

Is it really happning ? Did you check the complete article link that I have given.

Maintain GridView Scroll Position and Header Inside Update Panel[^]

Please check and let me know.

Thanks !

Cheers !
Abhijit
Codeproject MVP

Re: isse when scrolling horizontal

14 Mar '10 - 21:10

Pranay, You can have a look into this also. Grid View with fixed header[^] Cheers ! Abhijit Codeproject MVP
Sign In·View Thread·Permalink

General News Suggestion Question Bug Answer Joke Rant Admin

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

Type	Tip/Trick
Licence	CPOL
First Posted	13 Sep 2009
Views	35,654
Bookmarked	15 times

C#ASP.NETDevBeginner

The Next Version of Android - Some of What's Coming

Get the Insider News free each morning.

177 Construct 2 - making the scrolling background

39 Construct 2 - paralax scrolling

Related Articles

Maintain GridView Scroll Position and Header Inside UpdatePanel

How to Freeze GridView Header While Scrolling ?

Grid View with Fixed Header

How to Freeze GridView Header While Scrolling ?

"One size fits all" solution for freezing a Grid's header rows, why not?

Freezing ASP.NET GridView Header With JavaScript and CSS

Gridview Fixed Headers

Gridview with Fixed Header

Fixed Table Header atop scrollable GridView in ASP.NET

Freeze Footer in a table

Scroll Gridview while Maintaining Scroll Position

ScrollingGrid: A cross-browser freeze-header two-way scrolling DataGrid

Custom Paging GridView in ASP.NET & Oracle.

Scrollable Gridview with Freeze header and sort image.

Freeze Table Header and Columns

An ASP.NET DataGrid Custom Control to Freeze Header, Rows, Columns just by changing a single attribute value

The Freeze Pane DataGrid

Extended GridView with Fixed Header and Pager

How to Fixed GridView's Header and Footer when scrolling?

How To Freeze Columns in Radgrid MVC

Permalink | Advertise | Privacy | Mobile
Web03 | 2.6.130516.1 | Last Updated 13 Sep 2009

Article Copyright 2009 by Abhijit Jana
Everything else Copyright © CodeProject, 1999-2013
Terms of Use

Layout: fixed | fluid