Click here to Skip to main content
Click here to Skip to main content

Fixed header in ASP.NET DataGrid

By , 20 Apr 2005
Rate this:
Please Sign up or sign in to vote.

Introduction

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

<DIV style="OVERFLOW: auto; HEIGHT: 
120px">
<asp:DataGrid ...
</DIV>

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:

<style type="text/css">
<!--
.DataGridFixedHeader {background-color: white; position:relative; top:expression(this.offsetParent.scrollTop);}
-->
</style>

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 HeaderStyle element:

<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 SharePoint styles).

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 DataGrid. The style solution in this article, however, is as simple as it gets.

Supported Browsers

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

KjellSJ
Web Developer
Norway Norway
My blog: kjellsj.blogspot.com
My contribution to other stuff at CodeProject:
PleaseWaitButton

Comments and Discussions

 
QuestionCan I also alter the color of Visited Link in the datagrid header? Pinmembersmcirish22-Apr-08 8:09 
AnswerRe: Can I also alter the color of Visited Link in the datagrid header? Pinmembernsimeonov5-Dec-08 14:55 
GeneralFixed Grid Header with Scrollable Data Pinmemberaswini9-Apr-08 1:22 
Generaldont see border in head datagrid PinmemberRoxanaAFG10-Oct-07 9:09 
GeneralRe: dont see border in head datagrid PinmemberMarkShoe12-Oct-07 5:35 
GeneralRe: dont see border in head datagrid Pinmemberjigscool_2225-Feb-08 10:44 
GeneralRe: dont see border in head datagrid Pinmemberhasitha12319-Mar-08 23:04 
GeneralRe: dont see border in head datagrid PinmemberTheSoundofCylons3-Jun-08 3:23 
GeneralRe: dont see border in head datagrid Pinmemberrterry3-Nov-09 7:27 
GeneralRe: dont see border in head datagrid PinmemberTheSoundofCylons3-Nov-09 8:11 
GeneralDIV + Fixed Header Not working Pinmembersbadriprasad21-Sep-07 21:13 
QuestionHow to get Vertical Scroll bar only Pinmembersmcirish21-Aug-07 7:59 
AnswerRe: How to get Vertical Scroll bar only PinmemberMember 446923413-Jan-11 9:32 
GeneralFixed Header and Fixed Pager(or Footer) as well Pinmemberahmedelbatal22-Jul-07 3:43 
Generalexpression not working on Mozila Pinmembersmruti_ranjan18-Apr-07 23:52 
GeneralEditing items that you must scroll to see Pinmemberevshell1813-Apr-07 5:37 
GeneralRe: Editing items that you must scroll to see Pinmemberevshell1816-Apr-07 5:02 
GeneralRe: Editing items that you must scroll to see Pinmemberqtran020331-May-07 8:23 
Generaldon't use top: expression PinmemberShiggity30-Mar-07 8:49 
GeneralRe: don't use top: expression PinmemberDebo_Net9-Sep-07 20:41 
GeneralWatch Positioning Pinmemberjohnsaxton@yahoo.com15-Nov-06 3:03 
GeneralDatagrid Header Pinmembernour12310-Nov-06 0:24 
AnswerRe: Datagrid Header Pinmembersmcirish21-Aug-07 8:06 
Generalcheckbox in gridview PinmemberRonjon Kumar Ghosh16-Sep-06 23:01 
Questionfixed header gridview PinmemberSultan Khan16-Sep-06 22:38 
GeneralMaster Pages and Gridview with Fixed header and Horizontal scroll bar PinmemberGoGo.Net11-May-06 13:14 
GeneralFix Column Pinmemberanhph227-Apr-06 23:52 
QuestionNot working on Mozila PinmemberJeevan anjna19-Apr-06 23:59 
GeneralAbout Sorting Pinmembersyemhusa17-Mar-06 4:55 
GeneralHeader Style Columns Deleted PinmemberAlonfz14-Dec-05 21:28 
GeneralSharePoint: fixed header Pinmemberschindan10-Nov-05 2:55 
GeneralRe: SharePoint: fixed header PinmemberKjellSJ10-Nov-05 7:34 
GeneralASP.NET 1.x - you're on your own, folks! PinmemberKjellSJ8-Nov-05 9:39 
QuestionHow to Fix the Footer PinmemberBrijesh Tripathi8-Oct-05 10:11 
AnswerRe: How to Fix the Footer Pinmemberelinlee5-Dec-05 3:03 
GeneralRe: How to Fix the Footer PinmemberArshadAli16-Jul-06 23:58 
QuestionRe: How to Fix the Footer PinmemberArshadAli17-Jul-06 0:59 
GeneralRe: How to Fix the Footer Pinmemberpankajrathore2-Aug-06 20:18 
QuestionRe: How to Fix the Footer PinmemberRonjon Kumar Ghosh16-Sep-06 22:50 
QuestionTemplateColumn PinmemberKotlet4-Oct-05 4:49 
AnswerRe: TemplateColumn PinmemberKjellSJ12-Nov-05 4:19 
QuestionMultiline header problem ? Pinmemberbrowndog27-Jul-05 9:47 
GeneralFixed Header in DataGird Pinmembermichelpf21-Jul-05 3:39 
GeneralRe: Fixed Header in DataGird PinmemberKjellSJ31-Jul-05 2:04 
GeneralAnother approach PinsussAnonymous20-Jun-05 17:57 
GeneralRows height gets large with few rows PinmemberMASTERTECH196420-May-05 6:01 
GeneralRe: Rows height gets large with few rows PinmemberKjellSJ20-May-05 6:12 
GeneralRe: Rows height gets large with few rows PinsussAndrew Vaverchak27-May-05 5:01 
GeneralRe: Rows height gets large with few rows PinmemberMASTERTECH196427-May-05 5:22 
GeneralRe: Rows height gets large with few rows PinsussAnonymous19-Jul-05 2:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 21 Apr 2005
Article Copyright 2005 by KjellSJ
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid