A very common design request is to create a
DataGrid list, that can contain many rows (e.g. account contacts list), that has a fixed maximum height and a scrollbar when there are more rows than can fit into the allotted space. This is easily done by putting the
DataGrid within a
<DIV style="OVERFLOW: auto; HEIGHT:
Then the next design request made by customers is to have a scrolling body with fixed column headers so that, users don't have to remember which column contains what. Such a fixed header that stays put and never scroll out of view can be made using a
style like this:
The background color is needed to hide the data rows as they scroll under the header row. Make sure that the
style is on a single line, the expression might not work when the
style definition uses multiple lines.
Apply the new header style to the
DataGrid using the
<asp:DataGrid id="dgContacts" runat="server" ... >
<HeaderStyle CssClass="ms-formlabel DataGridFixedHeader"></HeaderStyle>
Note how can you apply multiple classes within the
CssClass attribute to combine several styles to achieve reuse in your web pages or to combine them with styles that are not your own (such as
There are several other suggestions out there on how to achieve a fixed header row, such as having a separate table above the
DataGrid, but this suffers from alignment and column width problems, for e.g., when a table cell contains non-breaking content. It also creates more work when changing the columns of the
style solution in this article, however, is as simple as it gets.
This solution is based on CSS expressions, and works with MSIE 5.x and 6.x. It is pure client-side and should not interfere with server-side code (except for adding the
style), but it might behave strange if you have other positioning stuff in your page.