Click here to Skip to main content
12,244,700 members (52,631 online)
Click here to Skip to main content
Add your own
alternative version

Stats

28.7K views
520 downloads
24 bookmarked
Posted

Scrollable GridView

, 15 Jul 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Creating a scrollable GridView with a fixed header.

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.

License

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

Share

About the Author

Jay Stacey
Software Developer (Junior) Startech.com
Canada Canada
I am a Fanshawe College Student in the Computer Programmer Analyst Program. I have been programming since I was 13 years old. I look forward to expanding my knowledge and sharing it with everyone.

You may also be interested in...

Comments and Discussions

 
Questionworks for Firefox 3.0 and IE 7.0 ?? Pin
alhambra-eidos28-Aug-08 9:35
memberalhambra-eidos28-Aug-08 9:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.160426.1 | Last Updated 15 Jul 2008
Article Copyright 2008 by Jay Stacey
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid