Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

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 Ajax, 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 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;*/
background-color:Aqua;
color: white;
position:relative;
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.

Cheers!

History

  • 24th September, 2008: Initial post

License

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

Share

About the Author

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

Comments and Discussions

 
GeneralGridView With Fixed Headers in Asp.Net Using C# and jQuery PinmemberBinu198520-Jun-14 23:56 
QuestionScroll Gridview, Maintain Position, auto update, txt file as source PinmemberMember 1085075719-Jun-14 5:21 
QuestionscrollPos not defined in IE 9 Pinmemberesb31esb315-Apr-12 9:52 
AnswerRe: scrollPos not defined in IE 9 PinmemberAaron_B18-Jun-12 13:16 
BugMicrosoft JScript runtime error: 'scrollPos' is undefined PinmemberJeegnesh11-Mar-12 6:38 
GeneralExceptional Pinmemberaniketathalye6-Jan-12 11:21 
QuestionHeader doesn't scroll left and right Pinmemberwvuco28-Sep-11 2:15 
GeneralUpdate to scrollTo function PinmemberjasonHall31-Dec-10 8:21 
GeneralMy vote of 4 PinmemberjasonHall30-Dec-10 11:10 
GeneralMy vote of 1 PinmemberMember 336802510-Dec-10 20:25 
GeneralIE8 header scroll Pinmemberrichardbrigzy26-Apr-10 8:10 
Hi
this looks good ... but in IE8 the header seems to scroll anyway?
Can anyone please help me..
Richard
GeneralRe: IE8 header scroll Pinmemberrichardbrigzy26-Apr-10 10:06 
GeneralRe: IE8 header scroll Pinmemberrichardbrigzy26-Apr-10 10:21 
GeneralThis Actually Works IF you remove the Master Page PinmemberMacDSmith310-Jul-09 7:19 
QuestionGreat help! ... but.... Pinmemberjohn malcovich 2325-Jun-09 11:41 
AnswerRe: Great help! ... but.... Pinmembertomcat125-Jun-09 14:17 
Generalmore complicated project not works PinmemberBoris Pelmenstein17-May-09 2:47 
GeneralRe: more complicated project not works Pinmembertomcat125-Jun-09 14:20 
GeneralStill Doesn't Work in Firefox Pinmembermeldes28-Jan-09 14:30 
GeneralRe: Still Doesn't Work in Firefox Pinmembertomcat12-Feb-09 8:34 
Questionfirefox problem? Pinmemberpalmerm113-Oct-08 10:01 
AnswerRe: firefox problem? Pinmembertomcat113-Oct-08 12:25 
GeneralThanks....so easy, worked first time Pinmembercheedleman2-Oct-08 8:29 
Generalcool PinmemberLeblanc Meneses29-Sep-08 6:43 

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
Web02 | 2.8.140916.1 | Last Updated 24 Sep 2008
Article Copyright 2008 by tomcat1
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid