Buy the Book! 5-Star Rating at Amazon.com! Amazon.com ratings updated weekly... Advertisements

In an earlier FAQ, Creating a Scrollable DataGrid, we saw how to create a scrollable DataGrid. However, when scrolling through the DataGrid, the header columns would not be visible, since they were not fixed. Ideally, when displaying a scrollable DataGrid we want to be able to have the header columns fixed, and only the body of the DataGrid scroll.

This can be accomplished with the ASP.NET DataGrid by surrounding the DataGrid with a div tag whose overflow style attribute is set to auto or scroll, as we saw in the previous FAQ. However, to have fixed headers, what we do is hide the scrollable DataGrid's headers (by setting the DataGrid's ShowHeader property to False), and then create an HTML table immediately before the div tag and scrollable DataGrid that displays the columns.

If this seems a bit confusing, don't worry. Let's check out an example to see how this can be handled.

Note that first, a standard HTML table is used to display the values of the header (FAQ ID, Question, and Views). Then, a scrollable DataGrid is displayed, with its ShowHeader property set to False. The result is a scrollable DataGrid whose "header column" is fixed. (I put header column in quotes because it's really an HTML table that is being displayed as the header column, not the DataGrid's actual header.)

I have not found out any way to get everything to line up precisely short of just tweaking the style properties of the table that displays the "header column" so as to shift the header column over. Specifically, I found that shifting the "header column" over 9 pixels to the left compensated for the extra room the scrollbar took up. To move the "header column" over 9 pixels, use the following style attributes in the HTML table: position:relative; left:-9px;.

With this change, the new code becomes:

You can check out the new results in this live demo. Note that the "header column" and DataGrid body line up nicely.