Click here to Skip to main content
13,797,212 members
Click here to Skip to main content
Add your own
alternative version


28 bookmarked
Posted 24 Sep 2008
Licenced CPOL

Scroll Gridview while Maintaining Scroll Position

, 24 Sep 2008
Rate this:
Please Sign up or sign in to vote.
In this article, I’ll make a gridview control have a scroll bar, which will maintain the scroll position between postbacks with and without server postback (AJAX) along with a fixed header on the top.


In this article, I'll make gridview control have a scroll bar which will maintain the scroll position between postbacks with and without server postback (AJAX) along with a fixed header on the top.


Gridview is one of the very common controls for Web page but there are few unpleasant behaviors. Gridview doesn't have scroll bars and I prefer the vertical scroll bar so that my page is not infinitely long. Even by adding scroll bar (with div tag), the scroll position is not maintained so the grid repositions to the first row after post back, the same is true with AJAX update panel refresh. It is very annoying if there are more rows in the gridview that can fit on the screen.

Now if I add scroll bars with div tag, the header column scrolls up and that is also another disliked feature for me. Although these are three different issues, all are interrelated and all of them are desired to make gridview a desirable control to use. Of course there are many third party grids in case you don't mind another dependency.

Using the Code

The code is written using Visual Studio 2008 and it should work with Visual studio 2005 with some easy modifications. The code is written in C# and JavaScript.

Download the code and compile, file system is used instead of local IIS to avoid creation of virtual directory. For <city /><place />Ajax,</place /></city /> set ScrollWAjax.aspx as the default page otherwise set ScrollWOAjax.aspx as the startup page.

The code doesn't connect to any database and so anybody with Visual Studio 2008 can run without any changes or settings.

Points of Interest

These are three points explained in this article and I'll try to keep them separate for convenience.

  • The scroll bar 
  • Maintaining the position 
  • Fixed header on top

Scroll Bar

This is the easiest of all three and can be added with div tag and everybody is familiar with this good old tag.

<div id="divdatagrid1" style="width: 85%; overflow:scroll;
    height: 202px;" onscroll='javascript:setScroll(this, <% =scrollPos.ClientID %> );'> 

Id is important as it is some special behaviour specified in GridStyleSheet.css stylesheet. So if you change Id then change the search and replace id with the new id. Need help on CSS? Click here.

Maintaining Scroll Position

The div tag has Onscoll tag which specifies the JavaScript event for the onscroll event. The JavaScript is included in scroll.js. The scroll position is maintained in scrollPos hidden variable and after postback, the gridview is set to the saved scroll position using the scrollTop property. It’s a little tricky due to postback but you can use JavaScript debugger to step through the code for clarity.

<input id="scrollPos" runat="server" type="hidden" value="0" /> 

Rest of the code required for maintaining position is in the CS files for registering client side JavaScript code for the page.

Ajax page ScrollWAjax.aspx has the script code included in the page for the beginrequest event and pageloaded event, which is only required for <city /><place />AJAX code to handle client side postback.

$get used in JavaScript code in ScrollWAjax.aspx is the same as getElementById method. You can use this new shortcut for simplicity of code.

Without support of AJAX, you need the following two functions to save and set the scroll position: 

function setScroll(val, posId) {
posId.value = val.scrollTop;
//only required for w/o <city /><place />ajax</place /></city /> page ScrollWOAjax.
function scrollTo(what, posId) {
if (what != "0")
document.getElementById(what).scrollTop = document.getElementById(posId).value;

If you need to learn JavaScript, click here.

Fixed Header on Top

I had this a long time back and it still works with .NET and Visual Studio 2008. The trick is in the gridStyleSheet.css file.

/* Locks table header */
div#divdatagrid1 th {
/*text-align: center;*/
color: white;
cursor: default;
: expression(document.getElementById("divdatagrid1").scrollTop-2); /*IE5+ only*/
z-index: 10;

The top tag expression specified in th (tableheader) tag defines the top position of header and header position is maintained on top while scrolling the rows in gridview. The id specified in div tag is used here and id must match to make it work.

Expression of CSS.

Although I am not paid by Microsoft, now I have subdued you to use gridview at least for simple tasks, and avoid third party girds.



  • 24th September, 2008: Initial post


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


About the Author

United States United States
I am a software architect/developer, having 15 years of design/development experience. Currently working in large financial corporation, architecting .NET applications and coding using C#, ASP.NET, Java Script etc..

MS Computers, MCP, MCTS: .NET Framework 2.0 Web Applications.

You may also be interested in...

Comments and Discussions

QuestionHow the Update and Cancel Button Works? Pin
Chrisraj29-Jan-15 18:05
memberChrisraj29-Jan-15 18:05 
GeneralMessage Closed Pin
21-Jun-14 0:56
memberBinu198521-Jun-14 0:56 
QuestionScroll Gridview, Maintain Position, auto update, txt file as source Pin
longlostbro19-Jun-14 6:21
memberlonglostbro19-Jun-14 6:21 
QuestionscrollPos not defined in IE 9 Pin
esb31esb315-Apr-12 10:52
memberesb31esb315-Apr-12 10:52 
AnswerRe: scrollPos not defined in IE 9 Pin
Aaron_B18-Jun-12 14:16
memberAaron_B18-Jun-12 14:16 
BugMicrosoft JScript runtime error: 'scrollPos' is undefined Pin
Jeegnesh11-Mar-12 7:38
memberJeegnesh11-Mar-12 7:38 
GeneralExceptional Pin
aniketathalye6-Jan-12 12:21
memberaniketathalye6-Jan-12 12:21 
QuestionHeader doesn't scroll left and right Pin
wvuco28-Sep-11 3:15
memberwvuco28-Sep-11 3:15 
GeneralUpdate to scrollTo function Pin
jasonHall31-Dec-10 9:21
memberjasonHall31-Dec-10 9:21 
GeneralMy vote of 4 Pin
jasonHall30-Dec-10 12:10
memberjasonHall30-Dec-10 12:10 
GeneralMy vote of 1 Pin
Member 336802510-Dec-10 21:25
memberMember 336802510-Dec-10 21:25 
GeneralIE8 header scroll Pin
richardbrigzy26-Apr-10 9:10
memberrichardbrigzy26-Apr-10 9:10 
this looks good ... but in IE8 the header seems to scroll anyway?
Can anyone please help me..
GeneralRe: IE8 header scroll Pin
richardbrigzy26-Apr-10 11:06
memberrichardbrigzy26-Apr-10 11:06 
GeneralRe: IE8 header scroll Pin
richardbrigzy26-Apr-10 11:21
memberrichardbrigzy26-Apr-10 11:21 
GeneralThis Actually Works IF you remove the Master Page Pin
MacDSmith310-Jul-09 8:19
memberMacDSmith310-Jul-09 8:19 
QuestionGreat help! ... but.... Pin
john malcovich 2325-Jun-09 12:41
memberjohn malcovich 2325-Jun-09 12:41 
AnswerRe: Great help! ... but.... Pin
tomcat125-Jun-09 15:17
membertomcat125-Jun-09 15:17 
Generalmore complicated project not works Pin
Boris Pelmenstein17-May-09 3:47
memberBoris Pelmenstein17-May-09 3:47 
GeneralRe: more complicated project not works Pin
tomcat125-Jun-09 15:20
membertomcat125-Jun-09 15:20 
GeneralStill Doesn't Work in Firefox Pin
meldes28-Jan-09 15:30
membermeldes28-Jan-09 15:30 
GeneralRe: Still Doesn't Work in Firefox Pin
tomcat12-Feb-09 9:34
membertomcat12-Feb-09 9:34 
Questionfirefox problem? Pin
marvinpjr13-Oct-08 11:01
membermarvinpjr13-Oct-08 11:01 
AnswerRe: firefox problem? Pin
tomcat113-Oct-08 13:25
membertomcat113-Oct-08 13:25 easy, worked first time Pin
cheedleman2-Oct-08 9:29
membercheedleman2-Oct-08 9:29 
Generalcool Pin
Leblanc Meneses29-Sep-08 7:43
memberLeblanc Meneses29-Sep-08 7:43 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.181207.3 | Last Updated 24 Sep 2008
Article Copyright 2008 by tomcat1
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid