Click here to Skip to main content
13,862,209 members
Click here to Skip to main content
Add your own
alternative version


41 bookmarked
Posted 21 Mar 2004

ASP.NET DataGrid Header Slider Control

, 21 Mar 2004
Rate this:
Please Sign up or sign in to vote.
ASP.NET DataGrid Header plug-in that allows the header to stay on screen.

Sample Image - GridSlideHeader.jpg


Sometimes when tables display lots of data, it's difficult and cumbersome for the users to scroll back and forth to see which header corresponds to which column. I've developed a simple add-on control that will work with existing table type controls such as DataGrids and DataLists. The GridSlideHeader is an ASP.NET custom control that implements JavaScript (and CSS) that will "dock" the table's header when the header is scrolled out of the page.

For a live demo, check this link out.

Using the server control

The GridSlideHeader server control is a very simple add-on control and can be added to existing DataGrids and DataLists.

Simply call the GridSlideHeader control and set the DataGridID property that corresponds to the DataGrid/DataList ID. That's it!


<form id="Form1" method="post" runat="server">
   <asp:datagrid id="DataGridReport1" runat="server" 

         AutoGenerateColumns="False" BorderColor="#000066">
   <EditItemStyle ForeColor="Black" BackColor="Yellow"></EditItemStyle>
   <AlternatingItemStyle Font-Size="X-Small" 

   <ItemStyle Font-Size="X-Small" Font-Names="Verdana"></ItemStyle>
   <HeaderStyle Font-Bold="True" BackColor="#D7D7D7"></HeaderStyle>
      <asp:BoundColumn DataField="Title_ID" 

           HeaderText="Title_ID" SortExpression="Title_ID" />
      <asp:BoundColumn DataField="Title" HeaderText="Title" 

           SortExpression="Title" />
      <asp:BoundColumn DataField="Price" HeaderText="Price" 

           SortExpression="Price" />
      <asp:BoundColumn DataField="Publication" 

           HeaderText="Publication" SortExpression="Publication" />
      <asp:BoundColumn DataField="Type" HeaderText="Type" 

           SortExpression="Type" />
      <asp:BoundColumn DataField="Authors" HeaderText="Authors" 

   <cc1:GridSlideHeader id="GridSlideHeader1" 

           runat="server" DataGridID="DataGridReport1" />


This server control was quickly written and has much room for improvement. I didn't have time to implement the designer control stuff, so it may not look great in design mode. When implementing the JavaScript, instead of setting the TR positions, the control sets the TD positions of each header item. This was done to maintain the header borders. Lastly, I've been told this control is only compatible on IE platforms. Theoretically, it should be compatible on any browser that supports CSS positioning, but this is untested :P. Enjoy and let me know what bugs you find~...


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

Tony Truong
Architect Frontline Direct Inc., Adconion
United States United States
Tony Truong graduated from UCLA in Spring of 2001 and starting worked at Symantec Corporation as a Software Engineer. After a few years of developing various features for Norton SystemWorks, Tony moved to San Diego. He is currently writing database applications using ASP.NET and C# with the .NET Framework. Tony specializes in tara-byte databases with emphasis on high availability, optimization, and complex entity modeling.

You may also be interested in...


Comments and Discussions

Generaldose it work with sharepoint webaprt programmin???? [modified] Pin
eyadAdwan3-Aug-06 4:24
membereyadAdwan3-Aug-06 4:24 
GeneralError Creating Control Pin
CarlesP3-Jul-06 11:51
memberCarlesP3-Jul-06 11:51 
GeneralDos it work with DatagridView Pin
OmarAlAmoudi5-Mar-06 20:12
professionalOmarAlAmoudi5-Mar-06 20:12 
QuestionUmm? Pin
ARandomUserWithYourBestInterests23-Feb-05 9:46
sussARandomUserWithYourBestInterests23-Feb-05 9:46 
GeneralVery Good Pin
OmarAlAmoudi15-Feb-05 20:08
professionalOmarAlAmoudi15-Feb-05 20:08 
GeneralAdditions Pin
FattyMonkey20-May-04 5:21
memberFattyMonkey20-May-04 5:21 
GeneralWorks like a Champ Pin
Member 20208117-May-04 20:40
memberMember 20208117-May-04 20:40 
GeneralRe: Works like a Champ Pin
Tony Truong17-May-04 21:03
memberTony Truong17-May-04 21:03 
GeneralGood for simple layouts, bails *hard* on more complex pages Pin
yourlordjesus24-Apr-04 15:45
sussyourlordjesus24-Apr-04 15:45 
GeneralAdding to toolbox in VS.Net Pin
lillrune15-Apr-04 4:55
memberlillrune15-Apr-04 4:55 
Generalawesome Pin
sampahgua4-Apr-04 18:19
membersampahgua4-Apr-04 18:19 
QuestionDosn't work with div tags? Pin
Calle Manthey30-Mar-04 1:25
sussCalle Manthey30-Mar-04 1:25 
AnswerRe: Dosn't work with div tags? Pin
Anonymous25-May-04 17:56
memberAnonymous25-May-04 17:56 
GeneralRe: Dosn't work with div tags? Pin
Tony Truong25-May-04 20:08
memberTony Truong25-May-04 20:08 
GeneralDoesn't work with Mozilla Pin
Anonymous27-Mar-04 3:13
memberAnonymous27-Mar-04 3:13 
GeneralRe: Doesn't work with Mozilla Pin
Tony Truong27-Mar-04 11:17
memberTony Truong27-Mar-04 11:17 
GeneralRe: Doesn't work with Mozilla Pin
Anonymous29-Mar-04 0:36
memberAnonymous29-Mar-04 0:36 
GeneralRe: Doesn't work with Mozilla Pin
Tony Truong29-Mar-04 7:41
memberTony Truong29-Mar-04 7:41 
GeneralRe: Doesn't work with Mozilla Pin
smortensen24-Apr-04 15:50
membersmortensen24-Apr-04 15:50 
GeneralRe-sorting Pin
Anonymous26-Mar-04 5:01
memberAnonymous26-Mar-04 5:01 
GeneralRe: Re-sorting Pin
Tony Truong26-Mar-04 5:23
memberTony Truong26-Mar-04 5:23 
GeneralRe: Re-sorting Pin
Anonymous2-Apr-04 4:21
memberAnonymous2-Apr-04 4:21 
GeneralRe: Re-sorting Pin
Tony Truong2-Apr-04 17:23
memberTony Truong2-Apr-04 17:23 
GeneralPerfecto! Pin
yada yada25-Mar-04 19:37
memberyada yada25-Mar-04 19:37 

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
Web02 | 2.8.190214.1 | Last Updated 22 Mar 2004
Article Copyright 2004 by Tony Truong
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid