Thursday, 11 August 2011

ASP.NET: Scrollable GridView with Fixed Headers: jQuery

Sometimes I find that it's almost impossible to achieve something which should really be incredibly straightforward. Maybe it's because I'm an idiot, or maybe it's because Microsoft have missed a trick.

In this case, I needed to be able to freeze the colum headers of a GridView and make it vertically scrollable. I tried about a dozen different methods, from pure CSS to various JavaScript hacks, and even attempting to do it server-side to try to ensure browser compatibility. I won't link to any of the solutions I tried except one, since only one of them actually worked.

As usual, it was jQuery to the rescue. A simple plugin which you can use to freeze the column headers and add a vertical scrollbar, and with minimal effort. It works as tested in Firefox 3, Chrome and Internet Explorer 8 - though sometimes the column headers are a couple of pixels out of line here or there.

Anyway, there's a nice article describing how to use it on ASP Snippets.

The only drawback I found was that I couldn't really get it to behave properly when the window was resized - but I suspect that was my poor implementation of the plugin rather than a fault with the jQuery code itself.

In conclusion: Microsoft: Get your act together and make this a feature that can be enabled via a property.