Sometimes when working with small record sets. especially when they tend not to grow much, paging
GridView, while an attractive option, isn’t very helpful to end-users. My typical solution to this is to enclose the
GridView in a scrollable container and let the user scroll through the rendered record set.
This solution will suffice, but say you have a link for each row on the grid which when clicked would cause a post-back and open up a modal popup to edit a record in the grid. The obvious problem here is that the GridView control simply won’t maintain the scroll position and will throw the user back to the first record as soon as the post-back completes.
I will show the easiest way to fix this in a non-Ajaxian setup. Here’s everything you’ll need.
So, how does this work? The main part here is the server-side HiddenField control called
hfScrollPosition, which as the name suggests contains the scroll position of our GridView. Using a server-side control here takes care of carrying our scroll position between postbacks as it will simply be submitted in the post.
What we’re looking to do is save the scroll position into this hidden field as it changes. We do this by hooking into the client-side onscroll event of the scrollable div container.
The rest of this is simple jQuery scripting. We resolve the HiddenField control’s client ID into
ClientIDMode control attribute).
ready() event, which fires when DOM finishes loading.