Scroll Gridview while Maintaining Scroll Position

• Download source - 13.24 KB

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

• 24^th September, 2008: Initial post