Introduction

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.

Background

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.

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:

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.

Share

About the Author

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

Comments and Discussions

HI All, I have tried this method for my Edit Image Button and the scroll position works fine but On Click the Edit Button the Update and Cancel Image button to be displayed Using this Script it Fails to load that button, Still it remains on the Edit Button. How Can i Solve It.

Hey, I tried your code and it didn't seem to work on a timer databind. I hope you can help me.

I want this gridview to emulate a console, the text file I have is a server console log.
I want it to:
*Refresh when the file changes.(thus the timer)
*Scroll bar position maintained when updated, unless at bottom.
*When scroll bar position is at the bottom,stay at the bottom after databind update.

Thanks for your efforts. I tried it and getting an error as soon as I scroll the grid. The error message is : "Microsoft JScript runtime error: 'scrollPos' is undefined". I am using IE9. Am I missing something? I don't have much experience with JavaScript.

Great code. Works beautifully but when I resize my page to a narrow width and the div becomes narrower than the grid, the grid will scroll left and right but the header shows on top of everything to the right and does not scroll left and right with the grid. How can I scroll the header from side to side?
Also, doesn't seem to work in Firefox 6.0.2.

So far, this is the best & most complete solution out there that I could find. However, this solution is not without its pitfalls. I have a weird flicker in IE8 and Firefox(3.6) doesn't work at all. However the code works like a charm on Chrome, Safari, & Opera. If anyone finds a Firefox work-around, please let me know. Nice work, tomcat1!

--Update: The flicker that I'm experiencing in IE8 has something to do with my MasterPage. Once I took out the masterpage, the flicker goes away.

This description and code works great and is very well explained. Thank you!

I'm having a problem trying to implement it when using a master page though. I get the following error: "Microsoft JScript runtime error: Object expected" on the onscroll event of the div. Do you have to do something special when you move the tag from the content page to the master page for this to work?

I have tried to put form tag in Master Page but form tag should not be in master page. At one time I tried to have opening form tag in master page and closing in other content pages but somehow didn't fulfill the purpose. If you find out a way please share.

Dear tomcat1!
This paper is just that I need.
I attempted to use this approach in real more elaborated project. It uses: 1) sorting in several columns, 2) Ajax control "RoundedCornerExtender". I made all the things just as they were described in a paper.
Resuilting behaviour is following one: After selecting of needed the row the grid stays in the selected position 2 seconds and after it returns to upper position (row 0).