John Mendez

Searching around the internet for how to do a freeze pane with a gridview like in excel was a bit tough. I know there were some example out there but all were different (which is fine) so I wanted to post another way you can do it without complicated CSS.  The concept behind this is to have a table with 2 columns and the one column have a fixed width with a div that has an overflow to it with scrolling.  This example only has a freeze like effect for horizontal scrolling. So this freeze the first two columns of the gridview.  A screenshot below is the example of the code.

Before posting the code here is a bit more on how this is accomplished. It actually has two gridviews that are bound to the same dataset.  So in a sense...is this the most efficient way..probably not. Then again the dataset is already in memory so the performance hit may not be too much.  The only other thing I can think to do is create two seperate datasets then fill them with the columns needed from the source dataset.  To me, this may cause more work because now you have to fill two extra datasets instead of just using one.  Plus, with the one dataset you can use the same DataKeyNames for both gridviews so you won't be hard to keep track of the key from each gridview. 

Ok so here is the code that makes this happen.  I will put so more notes at the bottom.  This has been testing on my box in IE7, Firefox 3.0.7 and Safari 3.2.1.

FreezPane.aspx.cs

FreezePane.aspx - this may show up horrible because the code may be too wide for it

Ok so instead of using the style tags for the gridview I has to explicitly style each template field for the HeaderStyle and ItemStyle-Wrap.  I had to do this because that is how it worked properly in IE7.  If I just did the RowStyle, AlternatingRowStyle, HeaderStyle on the gridview itself it worked how it was supposed to in Firefox and Safari, but not IE7. Not sure why this is, but whatever, maybe I missed something.

Again, this produces a freeze pane like effect with a gridview, but it's actually two gridviews sharing the same dataset but only binding to columns necessary for each one from the dataset.  Here is the XML file for the mock data:

I probably just should of zipped up all the code huh...but what fun is that!  Ok any suggestions on how to make this better let me know, but with this concept it provides a way to use gridviews so the data can be dynamic without using any CSS really.
 

ASP.NET gridview