GridView with Fixed Header in ASP.NET
In this article, I am trying to solve the problem of scrolling headers in ASP.NET GridView control.
I have seen many articles on the GridView control with scrolling headers. I tried
several forums and websites, but didn't come up with a good solution that work well enough. Some work with the browser compatibility and some others don't work
In this article, I am trying to solve the problem of scrolling headers in the ASP.NET GridView control.
This article will fulfill the following requirements:
- GridView will have fixed header.
- GridView can be scrolled vertically.
Initial view of GridView when loaded
Final view of GridView when scrolls down
GridView doesn't have the ability to scroll. But if the GridView contains a larger number of rows or columns (say more than 100 rows and 15 columns), we
want it to have scrollbars.
Since the Div control has the ability to scroll horizontally and vertically,
therefore, to achieve scrolling in GridView, we have to wrap the GridView in the
Div control. It is the Div that actually scrolls, but it looks like the GridView
Using the Code
<meta http-equiv="Content-Type" content="text/html;
<meta http-equiv='X-UA-Compatible' content='IE=7' />
<link rel='stylesheet' type='text/css' href='Styles/StaticHeader.css' />
new xTableHeaderFixed('gvTheGrid', 'table-container',
0); }, false);
<asp:GridView ID="gvTheGrid" runat="server" GridLines="Both" CellPadding="3" AutoGenerateColumns="false"
BackColor="WhiteSmoke" AlternatingRowStyle-BackColor="Silver" HeaderStyle-Font-Size="Medium"
<asp:BoundField DataField="ID" HeaderText="ID" HeaderStyle-Width="60" ItemStyle-Width="60" />
<asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-Width="60" ItemStyle-Width="60" />
<asp:BoundField DataField="Price" HeaderText="Price" HeaderStyle-Width="60" ItemStyle-Width="60" />
<asp:BoundField DataField="Description" HeaderText="Description" HeaderStyle-Width="200"
The main reference I have taken is this from site to fix the issue.
Contents added by
Sep 19, 2012
It was really useful for me
(Suggestion: If anyone wants the vertical scroll bar to stick with table closely then give "float:left" to the div style)