Maintaining Fixed Headers in GridView

Introduction

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

Example

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 below:

.fixedheadercell
{
    FONT-WEIGHT: bold; 
    FONT-SIZE: 10pt; 
    WIDTH: 200px; 
    COLOR: white; 
    FONT-FAMILY: Arial; 
    BACKGROUND-COLOR: darkblue;
}

.fixedheadertable
{
    left: 0px;
    position: relative;
    top: 0px;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-top: 2px;
}

.gridcell
{
    WIDTH: 200px;
}

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

Summary

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.