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