Freezing GridView Column Headers with CSS and a ControlAdaptor

I was recently browsing through some of the CSS samples on Stu Nicholls web site.  I came across one that showed a couple of examples of how CSS can be applied to HTML tables to provide the 'frozen columns headers' feature. 

[Update: 10/1/2007]: I wrote a follow-up post describing how to acheive this using only CSS.

Live Demo (IE Only - this is just a prototype) | Download

In case you missed it, Dan Wahlin also recently created a nice AJAX Extender Control that accomplishes that same task using the ASP.NET AJAX client-side extender framework.  Dan's solution seems to work great (I have downloaded and played with it, but I am not using it in our production application), but I after looking at Stu's CSS only solution, I was curious what it would take to create an AJAX-less solution. 

Stu's and Dan's solution are pretty similar.  Both embed the table within a DIV element to handle the overflow scrollbar and they both define the column headers within the THEAD element.  Stu's samples don't use ASP.NET so he works directly with HTML tables.  Dan's sample extender control extends the regular ASP.NET GridView control.  If you have viewed the HTML the GridView control generates, you have probably noticed that it doesn't create a THEAD element, but instead just renders the column headers as the first TR within the TABLE.  Because of this, Dan's extender control moves the first TR into the THEAD.  Both solutions fix the positioning of the THEAD row so as the grid is scrolled the header always remains visible.

My approach for developing an AJAX-less solution for this was to have the GridView render the column headers within the THEAD element so Stu's styles can be applied without the need for modifying the table after it is rendered to the client.  It turns out the GridView Control Adaptor from the ASP.NET Control Adaptor site does exactly this (no code changes required).  If you aren't familiar with Control Adaptors, you can read more about them here.   

Because Stu already has the CSS attributes defined, and Microsoft had already developed the GridViewAdaptor, I just wired them together by defining the styles for the classes the GridViewAdaptor adds to the table it generates.  That's really all it took.  Also, because I was doing this for research, I only went as far as to get it working in IE.  Nevertheless, I did learn a few things that I thought I would share:

  • Control Adaptors allow you to change the HTML that is produced when an ASP.NET control is rendered.  This will allow you to plug in a new adaptor for an existing control if you need slightly (or radically) different HTML that what ASP.NET generates by default.  Keep this in mind next time you are debating between creating a new control or inheriting from an existing one.  Maybe an adaptor would fill your needs.
  • CSS is very flexible and sometimes it may help to remind yourself of its capabilities by viewing interactive samples of what can be done with purely CSS solutions.  You should check out Stu's site and view some of the samples he has created.

That's it.  Enjoy.


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/65

Comments


Posted by: Ryan on September 13, 2007 12:00 AM

This is slick and interesting, but did you notice that the header cuts off the first row?

Posted by: Deepak Chawla on September 14, 2007 12:00 AM

Scroll fast and see its not fixed.

Posted by: Anonymous on September 14, 2007 12:00 AM

nice find, I hope to include this into some of my future apps. FYI: there is a great project called CSS Friendly Adapters at codeplex. the examples are posted on asp.net.

Posted by: Mike on September 14, 2007 12:00 AM

Will it produce a horizontal scroll bar if there a lot of columns?

Posted by: Mitch on September 17, 2007 12:00 AM

I have also noticed that applying a skin to the gridview also seems to create TH elements for the headers. I have a simple solution that freezes the headers by doing the following: apply a skin to a gridview.wrap the gridview in a div or fieldset.Apply a css class to the wrapper that sets the overflow to scroll and the TH position to relative. You may need to set the TR height to 0px for IE.I set the height of the wrapper in the local style so I can reuse the css class. I have tested this in IE6 and 7 and Firefox and it works great.

Posted by: Emmanuel on September 17, 2007 12:00 AM

Hi, your posts are really great. I have a question in relation to what architectural path to take in implementing custom ASP.NET control styling. It looks like you can either use an Ajax extender or write an Adaptor for the control. My question is, by what do you make your choice of path? Pro and Con of each path in terms of extensibility and ease of use.

Posted by: DucCT on April 6, 2008 12:00 AM

I have problem with IE6.
so when I put combo box into detail grid and run it in IE6, the combo will in front of header row, anyone have trouble like me? Any suggestion?
Thanks a lots for your great idea

css lessons - css scrollbar examples code
-- http://css-lessons.ucoz.com/scroll-css-examples.htm --

Posted by: gautam goswami on August 9, 2008 04:45 AM

Hi, its great feature which can included any table generated control.
Thanks Matt.
I am having problem related with Firefox. it is smoothly running in IE family browsers but not freezing column in Firefox.
Have u any solution for this.
Kindly waiting ur response.

Posted by: Jeff on September 10, 2008 07:04 PM

This makes things so much easier, thanks! I have finally worked it all in to my page as it did not like some other code, but I have a problem where when you click on Edit, it loses it's scroll position when it goes to edit mode even though I have maintainscrollpositiononpostback="true" enabled in the page declaration. Any help would be greatly appreciated.

Posted by: Imran on September 19, 2008 11:55 AM

I think it will not work if you are using custom paging in gridview. Try using that with

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Imran wrote: I think it will not work if you are using custom paging in gridview. Try using that with ...
  • Jeff wrote: This makes things so much easier, thanks! I have finally worked it all in to my page as it did not l...
  • gautam goswami wrote: Hi, its great feature which can included any table generated control. Thanks Matt. I am having probl...
  • sweetangel wrote: css lessons - css scrollbar examples code -- <a href="http://css-lessons.ucoz.com/scroll-css-example...
  • DucCT wrote: I have problem with IE6. so when I put combo box into detail grid and run it in IE6, the combo will ...
  • Mitch wrote: I have also noticed that applying a skin to the gridview also seems to create TH elements for the he...
  • Emmanuel wrote: Hi, your posts are really great. I have a question in relation to what architectural path to take in...
  • Deepak Chawla wrote: Scroll fast and see its not fixed. ...