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

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.

Comments and Discussions

Generaldose it work with sharepoint webaprt programmin???? [modified] PinmembereyadAdwan3-Aug-06 4:24 
GeneralError Creating Control PinmemberCarlesP3-Jul-06 11:51 
GeneralDos it work with DatagridView PinmemberOmar20035-Mar-06 20:12 
QuestionUmm? PinsussARandomUserWithYourBestInterests23-Feb-05 9:46 
GeneralVery Good PinmemberOmar200315-Feb-05 20:08 
GeneralAdditions PinmemberFattyMonkey20-May-04 5:21 
GeneralWorks like a Champ PinmemberChuckle17-May-04 20:40 
GeneralRe: Works like a Champ PinmemberTony Truong17-May-04 21:03 
GeneralGood for simple layouts, bails *hard* on more complex pages Pinsussyourlordjesus24-Apr-04 15:45 
GeneralAdding to toolbox in VS.Net Pinmemberlillrune15-Apr-04 4:55 
That seems to be just what I'm looking for. I ran into problems when trying to add GorthControls.dll in the toolbox. It "could not be loaded. Check that any dependencies the file requires are installed". Any idea what this means?
Generalawesome Pinmembersyusman4-Apr-04 18:19 
QuestionDosn't work with div tags? PinsussCalle Manthey30-Mar-04 1:25 
AnswerRe: Dosn't work with div tags? PinsussAnonymous25-May-04 17:56 
GeneralRe: Dosn't work with div tags? PinmemberTony Truong25-May-04 20:08 
GeneralDoesn't work with Mozilla PinsussAnonymous27-Mar-04 3:13 
GeneralRe: Doesn't work with Mozilla PinmemberTony Truong27-Mar-04 11:17 
GeneralRe: Doesn't work with Mozilla PinsussAnonymous29-Mar-04 0:36 
GeneralRe: Doesn't work with Mozilla PinmemberTony Truong29-Mar-04 7:41 
GeneralRe: Doesn't work with Mozilla Pinmembersmortensen24-Apr-04 15:50 
GeneralRe-sorting PinsussAnonymous26-Mar-04 5:01 
GeneralRe: Re-sorting PinmemberTony Truong26-Mar-04 5:23 
GeneralRe: Re-sorting PinsussAnonymous2-Apr-04 4:21 
GeneralRe: Re-sorting PinmemberTony Truong2-Apr-04 17:23 
GeneralPerfecto! PinsussPhutile25-Mar-04 19:37 

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 | Terms of Use | Mobile
Web01 | 2.8.150331.1 | Last Updated 22 Mar 2004
Article Copyright 2004 by Tony Truong
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid