How to Add a Locked Header Row to an ASP.NET GridView Control

Artikkeli
06/23/2009

The GridView control is often used to display tabular data, much like an Excel spreadsheet. However, unlike Excel, the GridView control doesn't have any automatic way of locking the header row so that it doesn't scroll out of view.

Check out this example of a GridView within a DIV with the overflow-Y property set to scroll. Notice that as you scroll the GridView, the header row scrolls out of view. It would be more convenient to have a locked header row so that the header row is always visible regardless of the scoll position of the GridView. It would also be nice to have a header row that dynamically configured itself as per the data source so that if we add a new field to the GridView, a corresponding column automatically gets added to the locked header row.

Here's another example, but this time, the header row stays locked at the top of the GridView so that you can scroll without losing track of column names. There are a few steps required to implement this functionality.

Create a DIV on the page to contain the header row and set the DIV (either statically or dynamically) to the same width as the DIV that contains the GridView.
Insert an ASP.NET Table control into the header DIV.
In Page_Init, dynamically add the necessary cells to the header table and set the appropriate properties so that it matches the appearance of the rest of the GridView.
Check for sortable columns and dynamically add sorting LinkButtons to the header row.
Add code to handle the LinkButton's Click event and sort appropriately.

Let's go through each of these steps. (If you'd prefer to work with a working project, you can download the project at the end of this post.)

Creating the Header DIV and Inserting an ASP.NET Table Control (Steps 1 and 2)

To create a locked header row, we need to disable the header for the GridView control and instead dynamically create our own header.

Select the GridView control and change the ShowHeader property to false.
Create a new DIV above the DIV containing the GridView control using the following code.

<div id="DivHeader" style="vertical-align:top;width:650px;">
    <asp:Table ID="HeaderTable" runat="server"
               CellPadding="4"
               CellSpacing="0"
               Font-Size="11pt"
               BackColor="#274511"
               ForeColor="White">
    </asp:Table>
</div>

Note that the properties for my Table control were derived from the theme applied to my sample page. You can set these properties as you wish or dynamically set them so that they adjust to the GridView's properties automatically.

Notice that this Table control doesn't contain any cells. We'll add the necessary cells in Page_Init in the next step.

Add Code to Page_Init to Dynamically Create Header Cells and LinkButtons (Steps 3 and 4)

To dynamically add the cells for the header table, add the following code to Page_Init.

protected void Page_Init(object sender, EventArgs e)
{
TableRow headerRow = new TableRow();

    for (int x = 0; x < GridView1.Columns.Count; x++)
    {
        DataControlField col = GridView1.Columns[x];

        TableCell headerCell = new TableCell();
        headerCell.BorderStyle = BorderStyle.Solid;
        headerCell.BorderWidth = 1;
        headerCell.Font.Bold = true;

        // if the column has a SortExpression, we want to allow
        // sorting by that column. Therefore, we create a linkbutton
        // on those columns.
        if (col.SortExpression != "")
        {
            LinkButton lnkHeader = new LinkButton();
            lnkHeader.PostBackUrl = HttpContext.Current.Request.Url.LocalPath;
            lnkHeader.CommandArgument = col.SortExpression;
            lnkHeader.ForeColor = System.Drawing.Color.White;
            lnkHeader.Text = col.HeaderText;
            lnkHeader.Click += new EventHandler(HeaderLink_Click);
            headerCell.Controls.Add(lnkHeader);
        }
        else
        {
            headerCell.Text = col.HeaderText;
        }

headerCell.Width = col.ItemStyle.Width;
headerRow.Cells.Add(headerCell);

}

HeaderTable.Rows.Add(headerRow);
}

This code adds a new TableCell to the header table and then sets specific properties on that TableCell based on whether or not the GridView's column has a SortExpression specified. If it doesn't, this code just sets the Text property of the cell to the GridView column's HeaderText property. Otherwise, it creates a LinkButton and sets the following properties on it.

PostBackUrl - Set to the local URL of the current request.
CommandArgument - Set to the SortExpression of the GridView's column so that we can apply it when the LinkButton is clicked.
ForeColor - Set to White in my example, but you can set this dynamically if you wish to make the example more generic.
Text - Set to the GridView column's HeaderText property.

I also add a new event handler for the Click event of the LinkButton control. Let's look at the code for that event.

Code for the LinkButton's Click Event

The code in the LinkButton's Click event applies the necessary SortExpression based on which LinkButton was clicked. The code for the Click event appears below.

protected void HeaderLink_Click(object sender, System.EventArgs e)
{
LinkButton lnkHeader = (LinkButton)sender;
SortDirection direction = SortDirection.Ascending;

    // the CommandArgument of each linkbutton contains the sortexpression
    // for the column that was clicked.
    if (GridView1.SortExpression == lnkHeader.CommandArgument)
    {
        if (GridView1.SortDirection == SortDirection.Ascending)
        {
            direction = SortDirection.Descending;
        }
    }

GridView1.Sort(lnkHeader.CommandArgument, direction);
}

This code checks the CommandArgument for the LinkButton that was clicked (retrieved from the EventArgs) and applies the ascending or descending SortDirection based upon the result. It then calls the Sort method on the GridView.

AJAX-Enabling the Sample

If you are using ASP.NET AJAX, the code as-is will not do a partial postback. In order to have the LinkButtons sort using an AJAX async postback, you need to replace the line of code that sets the PostBackUrl property of the LinkButton with the following code.

lnkHeader.ID = "Sort" + col.HeaderText;

Doing this will allow ASP.NET Viewstate to track the LinkButton so that ASP.NET AJAX will work with the LinkButton.

Using this example, you can easily apply a locked header row to your GridView controls. If you'd like the completed sample project, you can download it below.

Sample Project

Size: 12KB
Download Now

Note: This download is hosted on my personal site, JimcoBooks.com.

Comments

Anonymous
June 25, 2009
This method is not working in IE 8 http://www.jimcobooks.com/lockedgrid/unlocked.aspx Can you provide us with code that works in IE8 also?
Anonymous
June 25, 2009
Hi, Srinivas. I tested the code in IE8 and previous versions, in Firefox, and in other browsers. Even tested it on Safari for Windows. I suspect your problem is that you are looking at the example where there isn't a locked header row. (Note the "unlocked.aspx" page.) Click the link for the sample with the locked header row and you'll see it working. Thanks. Jim
Anonymous
July 26, 2009
Thanks for the post but this really does NOT work with IE8.. I am also fighting for IE8 fix for the problem.. Thanks
Anonymous
July 26, 2009
What problem are you having with IE8? When I browse http://www.jimcobooks.com/lockedgrid/locked.aspx in IE 8 (I just did it), it works perfectly. Jim
Anonymous
September 10, 2009
Nice & clean, but what I'd like to see is a version that works when you don't set column widths, ie let the browser handle column widths based on content. I haven't seen anything that can handle this cleanly...
Anonymous
December 09, 2010
Hello James, I have used this example in VB.NET and find that it isn't firing the HeaderLink_Click in the codebehind. Another symptom is the table disappears once i click one of the links in the table. Any insight?
Anonymous
January 18, 2011
The comment has been removed

Jaa