Maintaining Fixed Headers in GridView
One of the commonly asked question by developers is how to maintain headers
of GridView in a fixed position. You must have observed that in Excel you can
freeze top cells of your spread sheet. When you scroll down the headers are
always visible making your sheet more readable. The same effect is often needed
in GridView control especially if you are displaying many records at a time. In
this article I will explain a technique that will allow you to achieve this with
Let's develop a sample web form that illustrates this techniques. Create a
new web site using Visual Studio. Drag and drop an SQL data Source control on
the web form. Configure it to select CustomerID, CompanyName, ContactName and
Country columns from Customers table of Northwind table.
Now drag and drop a Panel control inside the web form. Set its Height
property to 200px and Width property to 100%. You can change these properties as
per your requirement. Also, set ScrollBars property of Panel control to Auto.
This will cause scroll bars to be displayed when its content falls outside the
dimensions of the Panel.
Add a new HTML table with four columns and one row at the top of the Panel
control. This table will act as "freezed" header for your GridView. Enter
Customer ID, Company Name, Contact Name and Country in the table cells.
Add a new CSS style sheet to the web site and create two CSS classes as shown
The fixedheadercell class is to be applied to all the four table cells via
class attribute. There is nothing special as such about this CSS class. It
simply contain UI related properties for the header. The second CSS class
fixedheadertable is important. It sets position attribute to relative. The Left
and Top coordinates are then considered with respect to the Panel control rather
than the web form. The fixedheadertable class is to be applied to the table. The
gridcell CSS class is to be applied to GridView columns.
Apply the style sheet you just created to the web form using <link> tag.
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
Next, drag and drop a GridView control below the HTML table. Set DataSourceID
property of GridView to SqlDataSource1. Also set ShowHeaders property of
GridView to false. This is necessary because our column headings are displayed
by the table. Add four BoundFields to the GridView and set their DataField
properties to CustomerID, CompanyName, Contactname and Country respectively. For
each BoundField set ItemStyle-CssClass property to gridcell (see below).
That's it! Now run the web form. The following figure shows a sample run of
the web form we just developed.
As you will see, even if you scroll the grid the headers remain fixed at
Using ScrollBars property of Panel control and CSS relative positioning you
can easily add fixed headers to your GridView. This way when you scroll down the
column headings are always visible. In above example we attached CSS using
<link> tag. The CSS can be added as a part of your theme instead.