Click here to Skip to main content
12,075,066 members (66,865 online)
Click here to Skip to main content
Add your own
alternative version


92 bookmarked

Fixed header in ASP.NET DataGrid

, 20 Apr 2005
Rate this:
Please Sign up or sign in to vote.
How to get a fixed header row in an ASP.NET DataGrid?


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: 
<asp:DataGrid ...

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);}

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.


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

Web Developer
Norway Norway
My blog:
My contribution to other stuff at CodeProject:

You may also be interested in...

Comments and Discussions

QuestionCan I also alter the color of Visited Link in the datagrid header? Pin
smcirish22-Apr-08 9:09
membersmcirish22-Apr-08 9:09 
AnswerRe: Can I also alter the color of Visited Link in the datagrid header? Pin
nsimeonov5-Dec-08 15:55
membernsimeonov5-Dec-08 15:55 
GeneralFixed Grid Header with Scrollable Data Pin
aswini9-Apr-08 2:22
memberaswini9-Apr-08 2:22 
Generaldont see border in head datagrid Pin
RoxanaAFG10-Oct-07 10:09
memberRoxanaAFG10-Oct-07 10:09 
GeneralRe: dont see border in head datagrid Pin
MarkShoe12-Oct-07 6:35
memberMarkShoe12-Oct-07 6:35 
I'm having this same problem.

Actually, I found that I had to use TOP:expression(this.offsetParent.scrollTop-2) or when I scrolled down on the page I could see 2 pixels of the grid scrolling past above the header. But that's a different problem.

The problem I have now is that the grid lines between the header columns are gone. Any ideas?
GeneralRe: dont see border in head datagrid Pin
jigscool_2225-Feb-08 11:44
memberjigscool_2225-Feb-08 11:44 
GeneralRe: dont see border in head datagrid Pin
hasitha12320-Mar-08 0:04
memberhasitha12320-Mar-08 0:04 
GeneralRe: dont see border in head datagrid Pin
TheSoundofCylons3-Jun-08 4:23
memberTheSoundofCylons3-Jun-08 4:23 
GeneralRe: dont see border in head datagrid Pin
rterry3-Nov-09 8:27
memberrterry3-Nov-09 8:27 
GeneralRe: dont see border in head datagrid Pin
TheSoundofCylons3-Nov-09 9:11
memberTheSoundofCylons3-Nov-09 9:11 
GeneralDIV + Fixed Header Not working Pin
sbadriprasad21-Sep-07 22:13
membersbadriprasad21-Sep-07 22:13 
QuestionHow to get Vertical Scroll bar only Pin
smcirish21-Aug-07 8:59
membersmcirish21-Aug-07 8:59 
AnswerRe: How to get Vertical Scroll bar only Pin
Member 446923413-Jan-11 10:32
memberMember 446923413-Jan-11 10:32 
GeneralFixed Header and Fixed Pager(or Footer) as well Pin
ahmedelbatal22-Jul-07 4:43
memberahmedelbatal22-Jul-07 4:43 
Generalexpression not working on Mozila Pin
smruti_ranjan19-Apr-07 0:52
membersmruti_ranjan19-Apr-07 0:52 
GeneralEditing items that you must scroll to see Pin
evshell1813-Apr-07 6:37
memberevshell1813-Apr-07 6:37 
GeneralRe: Editing items that you must scroll to see Pin
evshell1816-Apr-07 6:02
memberevshell1816-Apr-07 6:02 
GeneralRe: Editing items that you must scroll to see Pin
qtran020331-May-07 9:23
memberqtran020331-May-07 9:23 
Generaldon't use top: expression Pin
Shiggity30-Mar-07 9:49
memberShiggity30-Mar-07 9:49 
GeneralRe: don't use top: expression Pin
Debo_Net9-Sep-07 21:41
memberDebo_Net9-Sep-07 21:41 
GeneralWatch Positioning Pin
johnsaxton@yahoo.com15-Nov-06 4:03
memberjohnsaxton@yahoo.com15-Nov-06 4:03 
GeneralDatagrid Header Pin
nour12310-Nov-06 1:24
membernour12310-Nov-06 1:24 
AnswerRe: Datagrid Header Pin
smcirish21-Aug-07 9:06
membersmcirish21-Aug-07 9:06 
Generalcheckbox in gridview Pin
Ronjon Kumar Ghosh17-Sep-06 0:01
memberRonjon Kumar Ghosh17-Sep-06 0:01 
Questionfixed header gridview Pin
Sultan Khan16-Sep-06 23:38
memberSultan Khan16-Sep-06 23:38 
GeneralMaster Pages and Gridview with Fixed header and Horizontal scroll bar Pin
GoGo.Net11-May-06 14:14
memberGoGo.Net11-May-06 14:14 
GeneralFix Column Pin
anhph228-Apr-06 0:52
memberanhph228-Apr-06 0:52 
QuestionNot working on Mozila Pin
Jeevan anjna20-Apr-06 0:59
memberJeevan anjna20-Apr-06 0:59 
GeneralAbout Sorting Pin
syemhusa17-Mar-06 5:55
membersyemhusa17-Mar-06 5:55 
GeneralHeader Style Columns Deleted Pin
Alonfz14-Dec-05 22:28
memberAlonfz14-Dec-05 22:28 
GeneralSharePoint: fixed header Pin
schindan10-Nov-05 3:55
memberschindan10-Nov-05 3:55 
GeneralRe: SharePoint: fixed header Pin
KjellSJ10-Nov-05 8:34
memberKjellSJ10-Nov-05 8:34 
GeneralASP.NET 1.x - you're on your own, folks! Pin
KjellSJ8-Nov-05 10:39
memberKjellSJ8-Nov-05 10:39 
QuestionHow to Fix the Footer Pin
Brijesh Tripathi8-Oct-05 11:11
memberBrijesh Tripathi8-Oct-05 11:11 
AnswerRe: How to Fix the Footer Pin
elinlee5-Dec-05 4:03
memberelinlee5-Dec-05 4:03 
GeneralRe: How to Fix the Footer Pin
ArshadAli17-Jul-06 0:58
memberArshadAli17-Jul-06 0:58 
QuestionRe: How to Fix the Footer Pin
ArshadAli17-Jul-06 1:59
memberArshadAli17-Jul-06 1:59 
GeneralRe: How to Fix the Footer Pin
pankajrathore2-Aug-06 21:18
memberpankajrathore2-Aug-06 21:18 
QuestionRe: How to Fix the Footer Pin
Ronjon Kumar Ghosh16-Sep-06 23:50
memberRonjon Kumar Ghosh16-Sep-06 23:50 
QuestionTemplateColumn Pin
Kotlet4-Oct-05 5:49
memberKotlet4-Oct-05 5:49 
AnswerRe: TemplateColumn Pin
KjellSJ12-Nov-05 5:19
memberKjellSJ12-Nov-05 5:19 
QuestionMultiline header problem ? Pin
browndog27-Jul-05 10:47
memberbrowndog27-Jul-05 10:47 
GeneralFixed Header in DataGird Pin
michelpf21-Jul-05 4:39
membermichelpf21-Jul-05 4:39 
GeneralRe: Fixed Header in DataGird Pin
KjellSJ31-Jul-05 3:04
memberKjellSJ31-Jul-05 3:04 
GeneralAnother approach Pin
Anonymous20-Jun-05 18:57
sussAnonymous20-Jun-05 18:57 
GeneralRows height gets large with few rows Pin
MASTERTECH196420-May-05 7:01
memberMASTERTECH196420-May-05 7:01 
GeneralRe: Rows height gets large with few rows Pin
KjellSJ20-May-05 7:12
memberKjellSJ20-May-05 7:12 
GeneralRe: Rows height gets large with few rows Pin
Andrew Vaverchak27-May-05 6:01
sussAndrew Vaverchak27-May-05 6:01 
GeneralRe: Rows height gets large with few rows Pin
MASTERTECH196427-May-05 6:22
memberMASTERTECH196427-May-05 6:22 
GeneralRe: Rows height gets large with few rows Pin
Anonymous19-Jul-05 3:39
sussAnonymous19-Jul-05 3:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web04 | 2.8.160208.1 | Last Updated 21 Apr 2005
Article Copyright 2005 by KjellSJ
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid