Scrollable GridView With Fixed Headers Asp.Net

Scrollable GridView With Fixed Headers Using CSS Example In Asp.Net 2.0,3.5,4.0 C# VB.NET. In this example i am going to show how to create scrollable GridView with fixed headers which don't get scrolled with records and stay on the top in asp.net using css, I've tested this code on IE7 and Firefox 2.0 , 3.5.

Scrollable GridView With Fixed Headers In Asp.Net 2.0,3.5,4.0 C# VB.NET

For this we need to add css to headers of gridview to keep them on the top.

First of all place a Panel on the aspx page from toolbox. Set height to 200px and width to 200px
and scrollbars to Vertical.

Now add a gridview inside this Panel and set the datasource to populate gridview.

We can also use JQuery to create Fixed Header Scrollable GridView






HTML SOURCE 
<form id="form1" runat="server">
<div>
<asp:Panel ID="Panel1" runat="server" Height="200px" 
                       Width="200px" ScrollBars="Vertical">

<asp:GridView ID="GridView1" runat="server" 
              AutoGenerateColumns="False" DataKeyNames="ID"
              DataSourceID="SqlDataSource1"
              RowStyle-VerticalAlign="Bottom"
              OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" 
                InsertVisible="False" 
                ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="Name" HeaderText="Name" 
                                 SortExpression="Name" />
<asp:BoundField DataField="Location" HeaderText="Location" 
                             SortExpression="Location" />
</Columns>
<HeaderStyle CssClass="header"Height="20px" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [ID], [Name], [Location] FROM [Details]">
</asp:SqlDataSource>
</asp:Panel>
</div>
</form>

Now Add below mention css style in the head section of page 
<head runat="server">
<title>Creating scrollable GridView with fixed headers</title>
<style type="text/css">
  .header
  {
    font-weight:bold;
    position:absolute;
    background-color:White;
  }
  </style>
</head>

Build and run the code.

This code works fine but there is one bug in it , first record of GridView gets hidden behind the fixed column headers.

To fix this issue we need to set height of first row in gridview to double of height of header row or double the height of other rows of gridview. for this we need to add below mentioned code in RowDataBound event of GridView.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            if(e.Row.RowIndex == 0)
           e.Row.Style.Add("height","40px");
        }
    }

Now the output will be as shown in image, In my example i've set the header height to "20px" using headerStyle in html source. so i'll be setting height of first row to "40px"












Download sample code attached



37 comments:

  1. AnonymousSeptember 1, 2009 at 3:19 AM

    Why does the first record not display?

    ReplyDelete
  2. AnonymousSeptember 1, 2009 at 7:04 PM

    This works great except for the fact the first record does not show, why is that? I also see your animated grid image starts at Id #2

    ReplyDelete
  3. UnknownSeptember 1, 2009 at 11:57 PM

    @Above:

    Thanks for pointing the bug, i've fixed it and updated the code in article, do read it again and let me know if it worked for you or not ?

    ReplyDelete
  4. AnonymousSeptember 4, 2009 at 1:50 PM

    Hello,
    A little but very important problem : you header column width are not corresponding to your items column width.
    do you have a solution for that ?

    ReplyDelete
  5. UnknownSeptember 8, 2009 at 9:11 PM

    @Above:

    You can set ItemStyle-Width and HeaderStyle-Width in html source of gridview to the value you want like this

    <asp:BoundField DataField="Name" HeaderText="Name"
    SortExpression="Name" ItemStyle-Width="100px"
    HeaderStyle-Width="100px"
    HeaderStyle-HorizontalAlign="Left"/>


    I've updated the code in sample code

    Do let me know if this doesn't solve your problem

    ReplyDelete
  6. AnonymousSeptember 18, 2009 at 5:54 PM

    Hi,

    Your post looks good and working fine, but i need header to move while horrizontal scroll, And NOT to move while vertical scroll. Can you please help me out.

    ReplyDelete
  7. AnonymousOctober 2, 2009 at 5:02 PM

    This comment has been removed by a blog administrator.

    ReplyDelete
  8. AnonymousDecember 3, 2009 at 11:45 PM

    Is there a way to remove the padding in the gridview so that the rows do not appear above the header as they scroll?

    ReplyDelete
  9. AnonymousJanuary 11, 2010 at 9:58 PM

    Actually,good post. thx

    ReplyDelete
  10. AnonymousJanuary 29, 2010 at 1:34 AM

    Anonymous said... 8 Is there a way to remove the padding in the gridview so that the rows do not appear above the header as they scroll?

    Try this:

    .header
    {
    padding: 0px;
    font-weight:bold;
    position:absolute;
    background-color:White;
    margin-top:-3;
    }

    ReplyDelete
  11. AnonymousMarch 31, 2010 at 3:31 PM

    placing the above line inside the gridview is giving a error :

    Content ('') does not match any properties within a 'System.Web.UI.WebControls.GridView', make sure it is well-formed

    so can nyone tell me the problem??

    ReplyDelete
  12. SheetalMay 25, 2010 at 5:41 PM

    Hi..

    I have template dropdown column in gridview and while scrolling all dropdown columns are gets over the header.
    Please i need it ASAP.

    ReplyDelete
  13. AnonymousSeptember 15, 2010 at 1:06 AM

    placing the above line inside the gridview is giving a error :

    Content ('') does not match any properties within a 'System.Web.UI.WebControls.GridView', make sure it is well-formed

    so can nyone tell me the problem??

    yes same problem is faced by me itself
    any solutions pls

    gives error in this line

    ReplyDelete
  14. AnonymousSeptember 20, 2010 at 2:46 PM

    azhar Rizvi.


    thanks 4 da post...
    keep posting. n helping us.

    Thanks & regards:
    Frm india,

    ReplyDelete
  15. AnonymousNovember 21, 2010 at 12:17 AM

    Ok, while I agree this is helpful it doesn't work too well when dealing with rowsets that need to scroll to the right. Also the titlbar is not being hidden by the dev. Why is that?

    ReplyDelete
  16. AnonymousFebruary 7, 2011 at 7:58 AM

    Hey thank you for the wonderful article it had been genuinely useful , I hope you will just publish additional about this ! This topic rocks

    ReplyDelete
  17. pritsFebruary 28, 2011 at 1:17 PM

    I have another problem.The headers will come from database.So the headers will change every Grid view.I want the headers width are same to its own cell size.I need solution for this !!

    ReplyDelete
  18. Best SEO FirmMarch 11, 2011 at 1:06 AM

    Hey thank you for the wonderful article it had been genuinely useful , I hope you will just publish additional about this. We are the SEO Company - provide SEO Services.

    ReplyDelete
  19. AnonymousApril 12, 2011 at 7:32 AM

    Hey - I am definitely happy to discove this. cool job!

    ReplyDelete
  20. AnonymousMay 3, 2011 at 9:09 AM

    It's really a very good article, which I need. One thing I need to now is that does this supports FF,Opera and Safari browsers.

    ReplyDelete
  21. AnonymousMay 29, 2011 at 5:20 AM

    Hey - I am really glad to discover this. Good job!

    ReplyDelete
  22. AnonymousJune 16, 2011 at 10:03 AM

    Hey - I am certainly happy to discover this. cool job!

    ReplyDelete
  23. DorababuSeptember 5, 2011 at 6:23 PM

    Works fine but when viewing in browsers like IE8 chrome and Fire fox i see some disturbed headers as following images

    In fire fox

    http://i55.tinypic.com/2l8g043.jpg

    ReplyDelete
  24. geoaveOctober 11, 2011 at 4:24 AM

    I've uncovered strange behavior that seems to be a bug.

    I have a very large gridview - I'm setting the panel to be 1800 px wide and 800 pixels high.

    1) When I scroll down,
    2) resize the windows smaller

    The header disappears. If I scroll up again, the header is still gone.
    If I resize the window to the same width as original or larger, the header renders again.

    I already have the scroll position set.

    There seems to be an ie9 onresize event that could be set to help with this situation.

    Unforunately, we're still using ie7, so visual studio 2008 shows errors.

    It would be preferable to figure out a .net / c# way to fix it (avoid javascript).

    Thanks!

    ReplyDelete
  25. geoaveOctober 11, 2011 at 4:48 AM

    I looks like switching the header css from absolute to relative resolves the particular issue I was having.

    that is

    .header {
    position:relative;
    ...}

    seems to fix the resizing issue.

    ReplyDelete
  26. prasidNovember 27, 2011 at 4:35 PM

    This comment has been removed by a blog administrator.

    ReplyDelete
  27. AnonymousApril 19, 2012 at 12:59 PM

    Thanx Its Working Perfect

    ReplyDelete
  28. AnonymousMay 10, 2012 at 12:42 AM

    If you click edit on the first item, the headers then again cover the item. Any solution?

    ReplyDelete
  29. AnonymousMay 13, 2012 at 7:32 AM

    I've been playing with this code for a while and I can't get my headers to align with the detail. I get the header wrapped as Column1Column2Colum3 This happens when position is set to absolute. If I remove it, the header is aligned properly, but I don't get the static header. I'm using a Master Gridview along with some children templates.


    This is how my template looks like:

    ReplyDelete
  30. AnonymousJune 19, 2012 at 6:41 PM

    This comment has been removed by a blog administrator.

    ReplyDelete
  31. AnonymousJune 26, 2012 at 2:41 PM

    for those having error as Content ('') does not match any properties within a 'System.Web.UI.WebControls.GridView', make sure it is well-formed , TRY HeaderStyle-CssClass="header" in the asp:gridview tag:

    ReplyDelete
  32. AnonymousJuly 18, 2012 at 7:07 PM

    I have read a few of the articles on your website now, and I really like your style of blogging.

    ReplyDelete
  33. Piyush PatelAugust 1, 2012 at 12:14 PM

    great help dude..

    ReplyDelete
  34. RanjuSeptember 26, 2012 at 11:40 AM

    Thankx amiT jaiN, it was of great help. in between, the header columns width are warped if the position is set to absolute in chrome and Firefox browser wherein in IE it works fine... further solution for this would be a great help to....

    ReplyDelete
  35. UnknownOctober 4, 2012 at 4:21 PM

    I have the headers which will come from database.So the headers will change often. I want the headers width are same to its own cell size. Please help!!!

    ReplyDelete
  36. AnonymousDecember 19, 2013 at 3:24 PM

    GridView header style and appearance customizing

    ReplyDelete
  37. AnonymousJanuary 2, 2014 at 4:45 PM

    What abt horizontal scroll re

    ReplyDelete