RSS FeedWe begin with a standard Panel control. With the Panel control, we can control the width, height, and scrollable option. For our code example, we set the height as 200px, the width as 100%, and set the Panel to scroll while showing only the vertical scrollbars. We will give the Panel the id pnlWrapper.
<asp:Panel ID="pnlWrapper" runat="server" Height="200px" Width="300px" ScrollBars="Vertical"> </asp:Panel>
Our next step is to add to pnlWrapper a GridView that we will assign the id gvScrollableExample. In the sample code below, the GridView will appear as only height 200px and width 300px as we have constrained in pnlWrapper. However, given enough bound data, the Header Row of gvScrollableExample will scroll out of view.
<asp:Panel ID="pnlWrapper" runat="server" Height="200px" Width="300px" ScrollBars="Vertical"> <asp:GridView ID="gvScrollableExample" runat="server"> </asp:GridView> </asp:Panel>
To fix this, we add a bit of CSS to ensure the Header Row will stay in view. In this situation, the Header Row will act as if it were hoovering above the data. For this to work, we will add inline CSS between the html’s head page as shown below:
<head>
<style type="text/css">
.gvFixedHeader
{
font-weight:bold;
position:relative;
background-color:White;
}
</style>
</head>
Next, we have to assign the CSS class to the GridView’s HeaderStyle. This can be done via Visual Studio’s GUI, or we can do it in code. Continuing from our example above, the new extended code will look like:
<asp:Panel ID="pnlWrapper" runat="server" Height="200px" Width="300px" ScrollBars="Vertical">
<asp:GridView ID="gvScrollableExample" runat="server">
<HeaderStyle CssClass="gvFixedHeader" />
</asp:GridView>
</asp:Panel>
The GridView is now ready for you to Bind data. This concludes the tutorial on creating a scrollable GridView with a Fixed Header in Visual Studio. Let me know if there are any questions!
Posted in 
Tags: 
Hi,
Thank you for the article.
I did about the same, just that instead of panel, I am using div.
When the div exceeded the stated width, the scroll bar appeared, however, the header shoot out of the gridview (header longer than the gridview).
Do you have any idea what went wrong or how I can resolve it?
Thank you!
hi there, thanks for the css tip, i was doing the same, but i couldnt fix the header ;)
hi,
what will we do if we want a horizontal scroll bar with a fix header also, and th no of columns are greater then panel width.
how can we get a fixed header in gridview if it scrolls vertically,the condition is that header should not scrolls….
Dont use CssClass=”gvFixedHeader” in headerstyle tag in gridview….
Two problems with this solution
(1) the header width is bigger than grid width.
(2)header should have to freeze in vertical scrolling but should scroll in horizontal scrolling
Please advise
I tried the example, but it didn’t work for me.
Worked great for me, had to add an offset to get it centered but thats it! Thanks!
its is not working properly in firefox. how to fix that please let me know.
Good work….
The Header Tetx Gets Hidden when we scroll down.
No Thanx.. I did nt work for me
Good one..!! worked..
hi i have used the csss style sheet of grid but on window resize i am not getting the proper header The header is becoming static there Any solution please
Hi Boss
This article is good and i used this css file for my gridview for fixed header. But it is not working
these code doesn’t work when we use gridview mouseover and mouseout event
There is an even easier way. Just create a Label background what ever color U wish. Place that at the top of grid outside the Panel. Then place lables which will be used for the field names on top of the long label. U will need to make sure the label fields on in front of the longer Header label. Make the label fields a different color that the header label. Thata all now U have a fixed header without using Css or any other code.
Guys, you might want to try this open-source ASP.NET CoolGridView. It just extends ASP.NET GridView. It supports fix headers, footer and pager. You can also place it inside UpdatePanel with no issue. It works well in Internet Explorer 8.0.6001, Firefox 3.5.3 and Safari 4.0.2.
http://johnsobrepena.blogspot.com/2009/09/extending-aspnet-gridview-for-fixed.html
Very Nice and Clean. Thanks! Do you have one that sorts by column when the user clicks on the column headings?
it is nt working in IE window restore mode……
gettin overlapped…….
This is working for IE but nor Firefox, as mentioned above..
Any solutions?
I tried in the same way, but succeeded partially.
but finally i found a way where GridView Header should be disabled (ShowHeader=”false”):
1. create a normal HTML table row (same width as gridview) with LINK BUTTONS as column headings where cells width should be same as respective gridview column width
2. create a div below html table row with overflow:auto and importantly some fixed height.
3. create your gridview in above div disabling HEADER and enabling SORT
4. Assign following c# script on LINK Button in html table row Header (on link button(s) click)
private void sortGridView(string expression, string SortSess)
{
SortDirection direction =SortDirection.Descending;
Search_View.Sort(” ORDER by ” + expression + ” ASC”, direction);
}
where expression is DB column name