Scrollable GridView

• Download source code - 1.94 KB

Introduction

This article is intended to show how to use a JavaScript file along with <div> and a CSS class header template to create a scrollable GridView with a fixed header.

Background

I have searched around for a way to create a scrollable GridView with a fixed/floating header. What I found was that there were many implementations that had flawed in some way or another. Don't get me wrong, I'm no expert; however, the solutions I did find either did not support resizing the page, or they did not allow the GridView to be positioned anywhere except the top of the page.

Using the Code

For starters, we need to create a GridView and populate it with several lines of data (enough to allow it to scroll, a couple hundred would suffice). The following code is just an example and will need to be modified for a data source that you may use.

<div id="GridviewDiv" 
  style="width: 100%; height: 80%; overflow: auto; position: absolute; left: 0px;">
<table id="fakeheader" style="position: absolute"> </table>
// note you'll have to set your datasource, or populate the gridview with rows.
<asp:GridView Id="GridView1" runat="server">
<HeaderStyle CssClass = "FixedHeader" BackColor="#5D7B9D" 
   Font-Bold="True" ForeColor="White"/> // feel free to modify the color scheme
</asp:GridView>
</div>

The previous segment shows how to wrap your GridView with a div tag. The overflow must be set to auto, and position to absolute. Then, we create a fake table header for use with the JavaScript. This creates the magic that would make our header appear to be fixed. Now, we need to create a header style CSS class.

<style type="text/css">
.FixedHeader {font-weight:bold; background-color: Green; position:relative; 
   top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}
</style> 

This should allow you to have a fixed header and a scrollable GridView; however, the fixed header will not support the page size adjustments. That is what the JavaScript file is for. So next, we implement the JavaScript. You'll need to download the JavaScript file and add it to your current folder. At the top of your ASP page, you'll need to reference that file. Like so...

<script language="javascript" type="text/javascript">
   InitializeFixedHeader("GridView1"); // you'll need to pass in the control Id.
</script> 

Note that I did not create this script; however, I have modified it to suit the needs of my application. Full credit of the source should go to Paul, his article located here: http://www.developer.com/lang/jscript/article.php/3696921. I'm not going to go into great detail of the JavaScript file right now; however, questions will be accepted and answered as best I can. Feel free to email me or post any questions. If you have managed to piece this together and get it working, you'll notice that the header is in a fixed position, and the GridView scrolls, and most importantly, you should be able to resize the page and the header will adjust. I have a working version and will hopefully come up with something I can distribute. In the meantime, I'll help out where I can, if you are having problems.

On a side note, this is my first post since joining CodeProject. I am sure it is not the best; however, I hope it provides a little help for people who are experiencing the same problem. I am sure that any further post will become a little better and more in-depth.

Points of Interest

I'm not sure on the compatibility of other browsers, all that I have tested is IE.