Creating Fixed Headers in an ASP.NET GridView using jQuery

Posted by: Suprotim Agarwal , on 1/9/2009, in Category jQuery and ASP.NET
Views: 205275
Abstract: This article will demonstrate how to to create Fixed Headers in an ASP.NET GridView using jQuery. The solution has been tested in IE 7 and Firefox 3 and works well. Read on!
Creating  Fixed Headers in an ASP.NET GridView using jQuery
 
This article will demonstrate how to create Fixed Headers in an ASP.NET GridView using jQuery. This solution is cross-browser and has been tested in IE 7 and Firefox 3.
The jQuery code used in this article is not my piece of work. But it is worth my time to write an article on it to introduce this script to you. I have seen plenty of scripts/solutions that proposed a workaround for a Fixed Header in a GridView, similar to the fixed header in Microsoft Excel. However either those solutions were over-complex or worked only on IE or Mozilla. This script works cross-browser (tested it in IE7 and Firefox3) and is absolutely easy to understand and use it in your solutions. If you have faced a similar requirement of creating a fixed header in an ASP.NET GridView, then  here’s a read for you. For those who implemented other approaches but are still looking out for a solution, this script should be helpful. This script will also work against a plain HTML table with a <thead> and <tbody>
I assume you are familiar with jQuery. If not, please read my article over here before continuing any further: Using jQuery with ASP.NET - A Beginner's Guide
For those familiar with jQuery, follow these simple steps to create a GridView with fixed header:
Set up a GridView as you usually do, binding it to a datasource. Here’s some sample markup where I am using the Northwind database and a GridView bound to the SQLDataSource to pull data from the database.
    <div>
          <asp:GridView ID="ScrollT" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
            DataSourceID="SqlDataSource1" AllowPaging="False" AllowSorting="True" OnPreRender="GridView1_PreRender">
            <Columns>                          
                <asp:BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="True" SortExpression="ProductID" />
                <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
                <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
                <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
            </Columns>
        </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [Discontinued] FROM [Products]">
            </asp:SqlDataSource>
    </div>
The <connectionStrings> element in the web.config will look similar to the following:
      <connectionStrings>
            <add name="NorthwindConnectionString" connectionString="Data Source =(local);Integrated Security = SSPI; Initial Catalog=Northwind;"/>
      </connectionStrings>
 
Assuming you have downloaded the jQuery library from here, now download these 2 jQuery files provided by webtoolkit: scrollabletable.js & jscrollable.js
Add references to all these files in the <head> element of the page as shown below:
<head runat="server">
    <title>Fixed Header</title>
    <script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
    <script src="Scripts/webtoolkit.jscrollable.js" type="text/javascript"></script>
    <script src="Scripts/webtoolkit.scrollabletable.js" type="text/javascript"></script>   
   
Now add some style to light up the GridView
<style type="text/css">
                  table {                      
                        font: normal 11px "Trebuchet MS", Verdana, Arial;                                              
                      background:#fff;                                 
                      border:solid 1px #C2EAD6;
                  }                
                 
                  td{                  
                  padding: 3px 3px 3px 6px;
                  color: #5D829B;
                  }
                  th {
                        font-weight:bold;
                        font-size:smaller;
                  color: #5D728A;                                             
                  padding: 0px 3px 3px 6px;
                  background: #CAE8EA                      
                  }
            </style>
 
And now some jQuery code to pass the table height and width to the jscrollable.js library. The jscrollable.js internally calls the scrollabletable.js that does all the magic of creating the fixed header using javascript.
    <script type="text/javascript">
        $(document).ready(function() {
            jQuery('table').Scrollable(400, 800);
        });
    </script>
Note: This script works against tables that have the <thead> and <tbody> tags. GridView does not generate the <thead> tags by default. In order to do so, add the following lines of code in the PreRender event of the GridView (so that it executes once)
C#
    protected void GridView1_PreRender(object sender, EventArgs e)
    {
        ScrollT.UseAccessibleHeader = true;
        ScrollT.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
VB.NET
      Protected Sub GridView1_PreRender(ByVal sender As Object, ByVal e As EventArgs)
            ScrollT.UseAccessibleHeader = True
            ScrollT.HeaderRow.TableSection = TableRowSection.TableHeader
      End Sub
And that’s all you need to do. Run the application and check out the FixedHeader that works on both IE and Mozilla.
GridView Fixed Header
I hope you liked the article and I thank you for viewing it. The source code of this application can be downloaded from here.

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
jQuery 3 - New Features and Performance Improvements

HTML Table and jQuery – Handy Code Snippets

jQuery Event Handling Basics - Difference between Bind, Live, Delegate and On

Select / Deselect All CheckBoxes using jQuery

jQuery UI DatePicker - Tips and Tricks

jQuery TreeView with Expand Collapse Icons

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Fifteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement by Copyscape



Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Rama on Sunday, January 11, 2009 6:22 PM
An excellent article. Did not know what JQuery was, now I know. Thanks for sharing the knowledge and I look forward to your other articles.
Comment posted by Rachmat Hariyanto on Sunday, January 11, 2009 8:36 PM
Your post is simple, but really important. But maybe you forgot to put something important in your post. Here it is (but in your sample code already exist):

<script type="text/javascript">
        $(document).ready(function() {
            jQuery('table').Scrollable(400, 800);
        });
    </script>

See you
Comment posted by Suprotim Agarwal on Sunday, January 11, 2009 8:45 PM
Rama: Thanks.

Rachmat: Thanks for the correction. Yep I forgot adding that piece of code. It's there now.Thanks again :)
Comment posted by Rachmat Hariyanto on Sunday, January 11, 2009 9:11 PM
Your post is simple, but really important. But maybe you forgot to put something important in your post. Here it is (but in your sample code already exist):

<script type="text/javascript">
        $(document).ready(function() {
            jQuery('table').Scrollable(400, 800);
        });
    </script>

See you
Comment posted by vvvlad on Tuesday, January 13, 2009 12:11 AM
Thank you for your post. I was just looking for such a functionality.
I have only one problem with it:
My GridView does not have a constant height. For the plugin the height of the GridView has to be predetermined..
Is it possible to "dynamically" determine the GridView height?

Thanks again
Comment posted by Scott on Friday, January 30, 2009 11:40 AM
OK, what about from a master page? I tried doing this from a master page and it didn't seem to work, gave me a javascript error. I had the include files in the head tag of the master. I took the same code (even same include statements) and put it into a non-master-based page and it worked.  Advice?
Comment posted by Chuck Sndyer on Monday, February 2, 2009 3:15 PM
Is there a way to get the header to scroll left to right at the same time.  The up/down scroll works fantastic, but I've got a gridview with dozen's of columns and horizontal scrolling does not work with this solution.

Comment posted by SACHIN on Tuesday, February 3, 2009 12:01 AM
HIIIIIIIIIIIII
Comment posted by Lineker Tomazeli on Wednesday, February 4, 2009 7:32 AM
Thanks for the article...
Comment posted by Suprotim Agarwal on Friday, February 6, 2009 2:37 AM
Scott: What's the error. Plz post it here.

Chuck: I need to try it out. Will see if i get sometime over the weekend.
Comment posted by anthony on Friday, February 6, 2009 2:32 PM
I tried to apply it in user control. Got this error at prerender
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
It complained that "Object reference is not set to an instance..."
It seems the GridView1.HeaderRow is null. Do i miss anything?
Comment posted by Suprotim Agarwal on Monday, February 9, 2009 9:20 PM
Hard to say without seeing code. Try searching the object like this:

object o = this.FindControl("GridView1");
if(o != null)
GridView gv = (GridView)o;

// do operations
Comment posted by wuchunwai on Wednesday, February 25, 2009 8:21 PM
Is there any one know how to do Temeplatefield for gridview by code in C#
Comment posted by Rob White on Thursday, February 26, 2009 4:09 AM
What about fixed columns as well?

So maybe fixed the header in place, plus the first two columns?
Comment posted by Suprotim Agarwal on Thursday, February 26, 2009 6:45 AM
wuchunwai: Similar post - http://forums.asp.net/p/1373108/2883768.aspx#2883768
Comment posted by Suprotim Agarwal on Thursday, February 26, 2009 6:46 AM
Rob: There is a plugin that does so http://plugins.jquery.com/taxonomy/term/813. haven't tried it yet.
Comment posted by Thanigainathan on Thursday, February 26, 2009 7:12 AM
Hi ,
Nice article. Please keep updated us on the latest knowledge that you are learning.

Thanks
Comment posted by Philip Vanstraceele on Thursday, February 26, 2009 3:19 PM
Great articel ! But how to implement with masterpages?

regards,

Philip
Comment posted by Mike on Friday, February 27, 2009 8:28 AM
How can I make it so I don't see the data scrolling behide the grid header?
Comment posted by Mark Kamoski on Friday, February 27, 2009 10:16 AM
Please help. You say "now download these 2 jQuery files provided by webtoolkit: scrollabletable.js & jscrollable.js" but those links bring me to http://www.webtoolkit.info/ where there is no download-link that I can find. Can you help?
Comment posted by Tom Barrett on Friday, February 27, 2009 11:39 AM
Nice script but I am having 2 problems.

1. In IE7 I am having the same problem Mike is having, you can see the content as it scrolls above the header.

2. And in FF3 the cell borders are not scrolling with the content. Causing the content to scroll over the borders.

Any help would be great.

Thanks

Tom B
Comment posted by Tom Barrett on Friday, February 27, 2009 11:53 AM
Nice script but I am having 2 problems.

1. In IE7 I am having the same problem Mike is having, you can see the content as it scrolls above the header.

2. And in FF3 the cell borders are not scrolling with the content. Causing the content to scroll over the borders.

Any help would be great.

Thanks

Tom B
Comment posted by Mark Kamoski on Friday, February 27, 2009 12:04 PM
This is a follow-up to my comment above, "Friday, February 27, 2009 10:16 AM". I never was able to find those files, "scrollabletable.js" and the "jscrollable.js", at the http://www.webtoolkit.info/ site. Ug. That is REALLY bad on their part-- they have a site with all these samples and nary a "download here" link in sight. Ug. However, I did download the sample code from your web page http://www.dotnetcurry.com/ShowArticle.aspx?ID=255 (which is this very article) and in it the "webtoolkit.scrollabletable.js" and the "webtoolkit.jscrollable.js" files are found. So, that is all set. Thank you. -- Mark Kamoski
Comment posted by Mark Kamoski on Friday, February 27, 2009 12:05 PM
BTW, you list the files in the article above as "scrollabletable.js" and the "jscrollable.js" in your article above and that is a little confusing because the files are actually named "webtoolkit.scrollabletable.js" and "webtoolkit.jscrollable.js" so this should set the record straight, for others, etc. Thank you. -- Mark Kamoski
Comment posted by Mark Kamoski on Friday, February 27, 2009 1:10 PM
This is a GREAT implementation. However, there seems to be a minor display bug. The case is such that the row that just scrolled up shows a small slice over the header row. Since this is hard to describe accurately with words alone, I have posted an explanatory image at this link... http://www.netbrainer.com/images/ScrollingGridBug200902271208.PNG ...which shows the case exactly. I just thought you should know. Regardless, it is a great implementation as-is. Thank you. -- Mark Kamoski
Comment posted by Tom Barrett on Friday, February 27, 2009 1:12 PM
Nice script but I am having 2 problems.

1. In IE7 I am having the same problem Mike is having, you can see the content as it scrolls above the header.

2. And in FF3 the cell borders are not scrolling with the content. Causing the content to scroll over the borders.

Any help would be great.

Thanks

Tom B
Comment posted by Mark Mason on Tuesday, March 3, 2009 1:05 PM
Works great in IE and FF!  Any idea how to do this for Safari and Chrome?
Comment posted by Gyana Ojha on Monday, March 9, 2009 7:11 AM
Hello sir,
It's realy helping me a lot in my currently on going project. But I'm not able to make it scroll horizontally as it has shown on the picture mention above. Can you be please help me out.

Thanking you
Gyana Ojha
Comment posted by Suprotim Agarwal on Tuesday, March 10, 2009 8:18 AM
Mark Kamoski, Tom: Thanks for the feedback. I will reproduce the bug over here and see if there is a solution to it

Mark Mason: Never tried it on Chrome/Safari.

Gyana: Please download the source code with this article. That should help you out!
Comment posted by Ramesh on Tuesday, March 17, 2009 1:13 AM
hai...

Thanks for your coding and script.Its work very nice for me.
Really.............
very nice articles..

Thanks to the developer..
Comment posted by Vipin Kumar on Friday, March 20, 2009 12:36 PM
Hi,

I have used your given example to fix header of GridView.  But, I am facing problem when I set AllowPaging="True" and its position at the top of Header of GridView.  I hope you will take a look at this problem and provide better solution of it.

Thanks

Vipin Kumar
Comment posted by Subin Bajracharya on Friday, March 20, 2009 2:24 PM
I have used your source file and bind the grid view with my local database but i am not able to display the scroll bars in the grid view.Can u suggest me what i have done wrong
Comment posted by Binesh Dangol on Friday, March 20, 2009 10:54 PM
Thnaks very much for your source.I have used it and it is working nicely but I dont want to display the horizontal scrolling.Can u sugest me how i could acheive this
Comment posted by Suprotim Agarwal on Tuesday, March 24, 2009 3:01 AM
Subin: It's difficult to comment without seeing what you have written

Binesh: There is a plugin that does so http://plugins.jquery.com/taxonomy/term/813. haven't tried it yet.
Comment posted by Anil Dutt Sharma on Friday, March 27, 2009 2:59 AM
Hi,
Thanks for such a great article
Works great in IE and FireFox  
But in FF if number of record are less say 2 or 3 and tbody has more height say 300px then rows height expands too, do you have any idea how to fix it
and Any idea how to do this for Safari and Chrome?
Comment posted by Mandeep on Thursday, April 2, 2009 5:02 PM
Hi,
I know you have clearly mentioned to use IE 7 but I need to use IE 6 and when I open the page in IE 6 after implementing all the code changes it makes a true of curry of all the controls in the page, looks horrible.

Any idea how to do this in IE6?

Although your approach is quite simple and straight forward.

Thanks,
Mandeep.
Comment posted by Mandeep on Friday, April 3, 2009 9:51 AM
Hi,
I know you have clearly mentioned to use IE 7 but I need to use IE 6 and when I open the page in IE 6 after implementing all the code changes it makes a true of curry of all the controls in the page, looks horrible.

Any idea how to do this in IE6?

Although your approach is quite simple and straight forward.

Thanks,
Mandeep.
Comment posted by Suprotim Agarwal on Sunday, April 5, 2009 7:18 AM
Mandeep: I haven't really tried it on IE6, although I do know that the results will not be the same. The sample has been tested on IE7 and Firefox.
Comment posted by Narayan on Tuesday, April 7, 2009 11:49 PM
Hi,
Thanks for this article, I would like to have one more functionality. as the scroolbar height is equivalent to total height of gridview instead the scrollbar should be inside the deail area, is it possible.

Thanks
Narayan
Comment posted by Narayan on Wednesday, April 8, 2009 11:55 AM
Hi,
Thanks for this article, I would like to have one more functionality. as the scroolbar height is equivalent to total height of gridview instead the scrollbar should be inside the deail area, is it possible.

Thanks
Narayan
Comment posted by venkat.b on Wednesday, April 15, 2009 6:11 AM
it'z good, but i am unable to unzip it is asking pasword for unzip
Comment posted by Suprotim Agarwal on Friday, April 17, 2009 5:48 AM
Venkat: That's for preventing spurious downloads. There is a text file within the zip which contains the instructions.
Comment posted by san on Friday, May 8, 2009 5:15 AM
The article is really great, thx very much.
But I've the same problem as ' vvvlad' i.e:
"GridView does not have a constant height.
Is it possible to "dynamically" determine the GridView height? which is at:
jQuery('table').Scrollable(dynamicHeight, 800);  

Any reply would be appriciated.. I need it desperately

Thanks
san
Comment posted by ganesh on Monday, May 11, 2009 2:10 AM
thanks for the great article but i have the same problem as Mark Kamoski and Tom did u find any fix for that if so plz post it so that we can use it thank once again
Comment posted by ganesh on Monday, May 11, 2009 9:05 AM
this dosent work for IE 8
Any reply would be appreciated.. I need it desperately

Thanks
Ganesh
Comment posted by Boots on Friday, May 15, 2009 6:27 PM
hey y'all,

great post!  2 part question / comment ...

1)  how to set dynamic height

in the Pre_Render add a line of code to set a unique attribute like this:

    protected void GridView1_PreRender(object sender, EventArgs e)
    {
        ScrollT.UseAccessibleHeader = true;
        ScrollT.HeaderRow.TableSection = TableRowSection.TableHeader;

        /*   NEW CODE BELOW   */
        int intDynamicWidth = 600;
        ScrollT.Attributes.Add("myDynamicHeight", intDynamicWidth.ToString());

    }


then in the code javascript you call your own function named "getGridViewHeight" like this:


    <script type="text/javascript">

        $(document).ready(function() {
            jQuery('table').Scrollable( getGridViewHeight() , 800);
        });
        

        function getGridViewHeight()
        {
            var intHeight = 200;  // default

            if( document.getElementById )
            {
      intHeight  = document.getElementById("ScrollT").getAttribute("myDynamicHeight");
       }
            
            return intHeight;
        }
        
    </script>

2) i have a very wide grid and i want to have the header stay constant for while scrolling UP/DOWN but have normal scrolling LEFT/RIGHT.  

for example, if i have a grid that has 20 columns but only want to have 5 visible at once (forcing you to scroll right), currently the header line is always above the rest of the GridView (outside the scrollable area) and will not scroll in any direction -- leaving only the first couple column headers in view!

i haven't dove into any code yet as i was hoping maybe someone else already did this - or maybe it can't be done!

...any ideas would be greatly appreciated!

thanks in advance,
Boots
Comment posted by chitgar on Sunday, May 31, 2009 5:22 PM
Very thank you...because u solve my problem.
Comment posted by Greg Brice on Friday, June 12, 2009 11:01 AM
Not working in IE 8. Getting [error Not implemented]. Any ideas? Code Below:

Modified the following line of code (36) in webtoolkit.scrollabletable.js to handle multiple Gridviews:

eval("window.attachEvent('onresize', function _onresize() { try { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } catch(e) { null; }})");


//USED TO MAKE SCROLLABLE THE ESTGV GRIDVEIW AND FIX THE HEADERROW IF DATAROW COUNT IS > 13
        //SET VARS FOR GRIDVIEW, ROWS
        var rows;
        var grid;
        function pageLoad() {
            //VERIFY GRIDVIEW EXISTS
           if(document.getElementById("ESTGV")!=null){
            //GET THE GRIDVIEW TO MANAGE
            grid=document.getElementById("ESTGV");
                //IF NOT NULL PROCEED
                if(grid!=null){
                    //GET ALL ROWS PRODUCED BY THIS GRIDVIEW
                    rows=$get('ESTGV').getElementsByTagName('TR');
                    for(i=1;i<rows.length;i++){
                    }
                        //SET CONDITION BASED ON # OF ROW TO ALLOW SCROLLING FOR THIS GRIDVIEW
                        if(i - 1 > 13){
                            //EXECUTE THIS jQUERY STATEMENT IF THE CONDITION ABOVE IS SATISFIRED
                            $(document).ready(function() {
                            $('#ESTGV').Scrollable(300, 756); {
                            };
                        });
                    }
                }
            }
       }

Thanks,
Greg
Comment posted by Suprotim Agarwal on Monday, June 15, 2009 9:22 AM
Greg: I have not yet tested it on IE8, just on Mozilla and IE7. Let me see if I can find some time to do the fixes. Damn! These cross-browser issues can be annoying.
Comment posted by Suresh on Wednesday, June 17, 2009 1:49 AM
Hi,

   Thanks, I faced some problem with the horizontal scroll bar.

if i change the scroll co-ordinates to (100, 100). It creates a problem that header is laying out side the scroll bar.

how to overcome this????

Thansk in advance..

Regars
Suresh
Comment posted by Dan on Wednesday, June 17, 2009 11:50 PM
This solution will only work in IE8 if IE7 emulation is on because scrollableTable.js uses setExpression which is deprecated in IE8, read here: http://blogs.msdn.com/ie/archive/2008/10/16/ending-expressions.aspx
Comment posted by Suprotim Agarwal on Monday, June 22, 2009 4:25 AM
Thanks for the link Dan! That was helpful.
Comment posted by Tony on Wednesday, July 8, 2009 12:19 PM
Is there a way to not display a horizontal scroll bar, only the vertical scroll?
Comment posted by Khristopher Hannon on Thursday, August 13, 2009 7:15 PM
works great
Comment posted by Sam Kochukalikkal on Wednesday, September 2, 2009 2:19 PM
Works like a charm. Thank you very much. Any plans on getting to work on Safari and Chrome
Comment posted by kbdguy on Friday, September 11, 2009 5:15 PM
Several have asked about getting rid of the horizontal scrollbar.  Using IE8, I found that removing the <!DOCTYPE...> entry caused the horizontal scrollbar to disappear.  I tried many <!DOCTYPE...> variations but all resulted in that pesky horizontal scrollbar.  I also found that I could keep the <!DOCTYPE...> entry if I edited webtoolkit.scrollabletable.js: change 16 to 17 in this line:

     this.scrollWidth = 16;

Comment posted by Suprotim Agarwal on Wednesday, September 16, 2009 3:47 AM
kdbguy: Thanks for that tip! Hope it helps the others too.
Comment posted by Raj on Thursday, November 5, 2009 9:44 AM
When I implement this code it works fine
I have to do some data manipulation in table at $(".divLeft").scroll which I have placed above the gridview
How do i accomplish this using Scrolltable.js file
Thanks
                  
Comment posted by Raj on Thursday, November 5, 2009 9:49 AM
If there is some space with Table headers
change the code in the scrollTable.js file
if (this.thead) {
         var trs = this.thead.getElementsByTagName('tr');
         for (x=0; x<trs.length; x++) {
            trs[x].style.position ='relative';
            trs[x].style.setExpression("top",  "this.parentElement.parentElement.parentElement.scrollTop  + 'px'");
         }
      }

TO this

if (this.thead) {
         var trs = this.thead.getElementsByTagName('tr');
         for (x=0; x<trs.length; x++) {
            trs[x].style.position ='relative';
            trs[x].style.setExpression("top",  "(this.parentElement.parentElement.parentElement.scrollTop -2) + 'px'");
         }
      }
Comment posted by pavvy on Friday, November 27, 2009 1:18 AM
wwow
Comment posted by Ashfaq on Wednesday, December 23, 2009 10:12 AM
hi, its very cool. But just wondering if someone has done its horizontal scrolling too.
Comment posted by Prakash on Friday, January 8, 2010 10:10 AM
Does Not work in IE8
Comment posted by coolshan on Wednesday, January 13, 2010 12:01 PM
I have a gridview with each row consisting of 3 textboxes.Now when the user enters the values in the textbox, I want to capture it using Jquery without any postback. How can I do it. Please help. Thanks in advance
Comment posted by Suprotim Agarwal on Sunday, January 17, 2010 3:03 AM
coolshan: When do you want to capture the event? On blur, click? Also confirm that the 3 tb are in a template field.
Comment posted by Ryan on Monday, February 1, 2010 3:56 PM
This code works great!  One issue I noticed though in Firefox is if there is only one record the row height equals the height set in the Javascript (so in the example above the row has a height of 400 pixels). IE seems to re-format it correctly.  Is there a way to fix this?  Thank you.
Comment posted by Ryan on Monday, February 1, 2010 4:41 PM
Sorry about the post being there three times.  I was refreshing my browser and it must have kept inserting my comment.
Comment posted by Suprotim Agarwal on Friday, February 5, 2010 9:24 PM
Ryan: Which version of Firefox are you testing this code on?
Comment posted by Elarrat on Thursday, April 8, 2010 4:08 PM
I one of those inside a updatepanel, which is inside a modalpopup. If I postback (through a button, for example) the modalpopup, I lost the scroll function and it never comes back, only if I refresh the page. Any ideas?
Comment posted by ravi lele on Friday, May 14, 2010 9:04 AM
Nice article, but when i am running this sample, it results into a exception in the webtoolkit.scrollabletable.js, it says "Not Implemented" on line number 24 (trs[x].style.setExpression("top",  "this.parentElement.parentElement.parentElement.scrollTop + 'px'");)

i am using IE8 , visual studio 2008 and downloaded the NORTHWIND database.

after ignoring the error, Header doesnt get fixed.

help is required.
Comment posted by sinkaidas on Tuesday, May 25, 2010 6:02 PM
i noticed that passing the height and width for 'tables' to the jscrollable.js library causes some major problems if you have numerous tables on your page.  i remedied this by passing only the element name instead of the generic 'table' tag.  something like this:

$('#elementName').Scrollable(800, 600);

hope this helps somebody :)
Comment posted by Roger Knowles on Tuesday, June 8, 2010 9:33 AM
Has anyone gotten a fix for the setExpression problem in IE8?

I have tried something like this:
trs[x].style.top = "this.parentElement.parentElement.parentElement.scrollTop + 'px'";
But that is invalid...

also, if I try something like this:
var t = this.parentElement.parentElement.parentElement.scrollTop;
I get "'this.parentElement.parentElement' is null or not an object".

Thanks for any advice you can offer.
Comment posted by Mandeep on Sunday, August 1, 2010 5:20 PM
folks,
I know this solution does not work in IE 8. Please try thi piece of gem for gridview fixed headers and other features
http://johnsobrepena.blogspot.com/2009/09/extending-aspnet-gridview-for-fixed.html
Comment posted by Mandeep on Sunday, August 1, 2010 11:29 PM
folks,
I know this solution does not work in IE 8. Please try thi piece of gem for gridview fixed headers and other features
http://johnsobrepena.blogspot.com/2009/09/extending-aspnet-gridview-for-fixed.html
Comment posted by fixedgrid on Thursday, October 14, 2010 12:23 PM
IE8, scrollbars work, header and footer not fixed
FF3.6, no scrollbars displayed, header and footer fixed
chrome6, no scrollbars and no fixed header or footer, not sized to 400,800
using jquery 1.4.1
Comment posted by shyam on Tuesday, November 30, 2010 10:35 AM
how to rectify data displying outside of the masterpage.
Comment posted by rihtam on Tuesday, December 21, 2010 6:43 AM
How to maintain the Scroll position on Post back?
:-(
Comment posted by Suprotim Agarwal on Thursday, December 23, 2010 3:10 AM
Ritham: Use <% Page Language ="C#"  MaintainScrollPositionOnPostBack="true" %>

Comment posted by senthil Kumar SM on Wednesday, February 9, 2011 7:51 AM
i am using firefox 2.0 ,i have reduced the width that can be reflected in IE but in firfox i can only get the vertical scroll bar ,the horizontal scroll bar is not working
Comment posted by Clay Seifert on Tuesday, March 8, 2011 8:39 PM
I'm runing your sample app using IE8 and the following command on line 24 of ScrollableTable is hanging with a message of "Not Implemented"

trs[x].style.setExpression("top",  "this.parentElement.parentElement.parentElement.scrollTop + 'px'");

Any ideas on how to correct?
Comment posted by xyz on Friday, May 20, 2011 12:29 AM
we had the same problem with Windows 7 IE8. The simplest quickfix solution which worked for us is wrapping the grid in a panel and enabling scrollbars in the panel instead of the grid.
Comment posted by JP on Friday, May 20, 2011 11:33 AM
This code doesn't work.
Comment posted by Clement Edwin on Friday, May 27, 2011 4:23 AM
Any workaround to get this working on IE 8? Advance Thanks.
The panel solution proposed by XYZ doesn't seem to work.
Comment posted by Sumit Maitra on Sunday, June 26, 2011 5:19 AM
This code will kind of work in IE8 in compatibility mode, however the plugin internally uses CSS settings that even IE has deprecated. Best way is to move to a different plugin like datatables.net. Having said that, the moot idea is to get the GridView to emit thead and tbody tags as outlined here. Once that is done, there are multiple jQuery plugins today that will work for you.
Comment posted by Eric Lindberg on Monday, November 14, 2011 7:28 PM
How do I modify the jQuery code to just operate on the GridView?  It looks like it's close to working, but other tables on the page are messeed up.  Thanks.
Comment posted by prashiddha on Sunday, November 27, 2011 5:01 AM
Your can have a look at http://thingsaroundnepal.blogspot.com/ for the solution of header fixed of grid view. The article is written in response to error cause while using the code of Code Project article "Grid View With Fixed Header"
Comment posted by Jason Rhinehart on Friday, December 9, 2011 9:44 AM
Great solution.  Anyone get it working with partial page postbacks?  The logic all dissapears when doing the grid sorting in an update panel.
Comment posted by Jason Rhinehart on Friday, December 9, 2011 11:58 AM
Great solution.  Anyone get it working with partial page postbacks?  The logic all dissapears when doing the grid sorting in an update panel.
Comment posted by Dharmesh on Thursday, March 1, 2012 9:54 AM
it doesn't work with IE8 browser.
Comment posted by BDub on Monday, June 18, 2012 8:22 AM
If your code does not work cross browser or is using depreciated code, either update it or update your article to say so.  This way, people won't spend hours trying to implement it, only to find it won't work for this or that browser or version - most people are off IE7
Comment posted by Suprotim Agarwal on Monday, June 18, 2012 9:32 PM
Dharmesh, BDub: I have mentioned it clearly that the code has been tested only on IE7. It's the first line of the article
Comment posted by test on Friday, November 9, 2012 4:09 AM
test
Comment posted by vishakha on Wednesday, June 5, 2013 4:20 AM
I have need the code of how to fixed the footer of gridview in asp.net
Comment posted by vishakha on Wednesday, June 5, 2013 4:38 AM
I have need the code of how to fixed the footer of gridview in asp.net
Comment posted by prasanta on Monday, September 15, 2014 6:21 AM
i tried with this but still getting same error.

if (this.thead) {
         var trs = this.thead.getElementsByTagName('tr');
         for (x=0; x<trs.length; x++) {
            trs[x].style.position ='relative';
            trs[x].style.setExpression("top",  "(this.parentElement.parentElement.parentElement.scrollTop -2) + 'px'");
         }
      }