ASP.NET Core 5.0 : MVC, Razor Pages, Web API, EF Core, Blazor, Design Patterns, and more. Private online coaching for software developers. Click here for more details.

Untitled 1

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


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:

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

    left: 0px;
    position: relative;
    top: 0px;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-top: 2px;

    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.


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. 

Bipin Joshi is an independent software consultant, trainer, author, yoga mentor, and meditation teacher. He has been programming, meditating, and teaching for 24+ years. He conducts instructor-led online training courses in ASP.NET family of technologies for individuals and small groups. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.

Get connected : Facebook  Twitter  LinkedIn  YouTube

Posted On : 26 April 2007

Tags : ASP.NET Web Forms Server Controls Data Controls

Subscribe to our newsletter

Get monthly email updates about new articles, tutorials, code samples, and how-tos getting added to our knowledge base.


Receive Weekly Updates