Fixed/Sticky Headers on ASP.NET GridView using jQuery
The GridView control in ASP.NET Web Forms is an extremely useful and quick way of getting data out to the user in a nice tabular format. It does have one weak spot though and that is some of the tags it uses when doing this. Specifically, not putting the header information inside a
So why is this important?
When you have a LOT of rows (as some do) after you’ve scrolled down the page and the table headers are out of view you can forget which column is which, especially if the data is similar (such as lots of numbers).
A quick and easy solution to this is to use a jQuery “sticky” or “fixed” table header plugin such as jquery.floatThead.
The problem comes in when you try and apply one of these plugins to a GridView. Since the GridView doesn’t use the
<thead> tag the plugins often can’t find the header information which they are supposed to be fixing at the top of the screen after the user has scrolled down, as a result they just don’t work.
In this case we’ll be using jQuery to fix the table to make it compatible with other jQuery plugins.
After either fix has been applied the table should now be compatible with other jQuery plugins.
Any tables also start to take on correct styling from CSS frameworks such as Bootstrap which also use the