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



If you like this post than join us or share

35 comments:

Anonymous said...

Why does the first record not display?


Anonymous said...

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


amiT jaiN said...

@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 ?


Anonymous said...

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 ?


amiT jaiN said...

@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


Anonymous said...

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.


Sandeep Aparajit said...

This comment has been removed by a blog administrator.


Anonymous said...

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


Anonymous said...

Actually,good post. thx


Anonymous said...

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;
}


Anonymous said...

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??


Sheetal said...

Hi..

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


Anonymous said...

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


Anonymous said...

azhar Rizvi.


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

Thanks & regards:
Frm india,


Anonymous said...

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?


Anonymous said...

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


prits said...

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 !!


Best SEO Firm said...

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.


Anonymous said...

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


Anonymous said...

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.


Anonymous said...

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


Anonymous said...

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


Dorababu said...

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


G said...

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!


G said...

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.


prasid said...

This comment has been removed by a blog administrator.


Anonymous said...

Thanx Its Working Perfect


Anonymous said...

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


Anonymous said...

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:


Anonymous said...

This comment has been removed by a blog administrator.


Anonymous said...

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:


Anonymous said...

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


Piyush Patel said...

great help dude..


Ranju said...

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....


ThangaMani G said...

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!!!


Find More Articles