Click here to Skip to main content
13,867,096 members
Click here to Skip to main content
Add your own
alternative version

Stats

425.8K views
92 bookmarked
Posted 8 Apr 2005
Licenced

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?

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

Share

About the Author

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

You may also be interested in...

Comments and Discussions

 
GeneralProblem when placed dropdown control in datagrid Pin
sureshvb18-May-05 21:16
membersureshvb18-May-05 21:16 
GeneralRe: Problem when placed dropdown control in datagrid Pin
KjellSJ18-May-05 21:50
memberKjellSJ18-May-05 21:50 
GeneralRe: Problem when placed dropdown control in datagrid Pin
KjellSJ12-Nov-05 5:21
memberKjellSJ12-Nov-05 5:21 
GeneralRe: Problem when placed dropdown control in datagrid Pin
TX_Travis14-Mar-06 7:19
memberTX_Travis14-Mar-06 7:19 
GeneralRe: Problem when placed dropdown control in datagrid Pin
anhph227-Apr-06 23:43
memberanhph227-Apr-06 23:43 
GeneralRe: Problem when placed dropdown control in datagrid Pin
bguill24-May-06 2:42
memberbguill24-May-06 2:42 
GeneralRe: Problem when placed dropdown control in datagrid [modified] Pin
RonTrull5-Jun-06 9:46
memberRonTrull5-Jun-06 9:46 
GeneralRe: Problem when placed dropdown control in datagrid Pin
Your Friend Manoj27-Feb-07 0:20
memberYour Friend Manoj27-Feb-07 0:20 
QuestionRe: Problem when placed dropdown control in datagrid Pin
sayanghosh28-Feb-07 2:36
membersayanghosh28-Feb-07 2:36 
GeneralMulti-row Headers Pin
Wasia29-Apr-05 10:29
memberWasia29-Apr-05 10:29 
QuestionPaging turned on- Can you Fix the Pager as well? Pin
SteveMets28-Apr-05 7:34
professionalSteveMets28-Apr-05 7:34 
AnswerRe: Paging turned on- Can you Fix the Pager as well? Pin
KjellSJ28-Apr-05 8:42
memberKjellSJ28-Apr-05 8:42 
GeneralRe: Paging turned on- Can you Fix the Pager as well? Pin
SteveMets1-May-05 10:25
professionalSteveMets1-May-05 10:25 
GeneralRe: Paging turned on- Can you Fix the Pager as well? Pin
KjellSJ1-May-05 21:46
memberKjellSJ1-May-05 21:46 
AnswerRe: Paging turned on- Can you Fix the Pager as well? Pin
SteveMets11-May-05 21:41
professionalSteveMets11-May-05 21:41 
GeneralThank you very much! Pin
jgshiloh22-Apr-05 3:42
memberjgshiloh22-Apr-05 3:42 
GeneralFor Gecko users... Pin
A name not registered?21-Apr-05 4:27
sussA name not registered?21-Apr-05 4:27 
GeneralRe: For Gecko users... Pin
KjellSJ21-Apr-05 10:27
memberKjellSJ21-Apr-05 10:27 
GeneralRe: For Gecko users... Pin
A name not registered :)21-Apr-05 21:09
sussA name not registered :)21-Apr-05 21:09 
GeneralRe: For Gecko users... Pin
Ashley van Gerven17-Oct-05 3:39
memberAshley van Gerven17-Oct-05 3:39 
GeneralHaving some problems. Pin
christ7520-Apr-05 13:42
memberchrist7520-Apr-05 13:42 
GeneralRe: Having some problems. Pin
KjellSJ20-Apr-05 21:51
memberKjellSJ20-Apr-05 21:51 
GeneralRe: Having some problems. Pin
KjellSJ21-Apr-05 21:17
memberKjellSJ21-Apr-05 21:17 
GeneralThis is great!!! Pin
jalbitz20-Apr-05 7:15
memberjalbitz20-Apr-05 7:15 
Questionwhat about when paging is turned on? Pin
justinkhill13-Apr-05 8:47
sussjustinkhill13-Apr-05 8:47 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190214.1 | Last Updated 21 Apr 2005
Article Copyright 2005 by KjellSJ
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid