Click here to Skip to main content
12,765,284 members (37,252 online)
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
Omar20035-Mar-06 20:12
memberOmar20035-Mar-06 20:12 
QuestionUmm? Pin
ARandomUserWithYourBestInterests23-Feb-05 9:46
sussARandomUserWithYourBestInterests23-Feb-05 9:46 
GeneralVery Good Pin
Omar200315-Feb-05 20:08
memberOmar200315-Feb-05 20:08 
GeneralAdditions Pin
FattyMonkey20-May-04 5:21
memberFattyMonkey20-May-04 5:21 
GeneralWorks like a Champ Pin
Chuckle17-May-04 20:40
memberChuckle17-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
syusman4-Apr-04 18:19
membersyusman4-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
sussAnonymous25-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
sussAnonymous27-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
sussAnonymous29-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
sussAnonymous26-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
sussAnonymous2-Apr-04 4:21 
I'm not the original poster of this thread, but some co-workers and I have tried the demo, and we're all getting the same error as soon as you open the demo and click on a header. Here's the details, not that there's a ton of information since we already know it happens when you Sort:

"Object reference not set to an instance of an object.
Description: An unhandled exception occurred <blah, blah - snipped >

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[NullReferenceException: Object reference not set to an instance of an object.]
GridSlideHeaderDemo.WebForm1.OnSort(Object source, DataGridSortCommandEventArgs e)
System.Web.UI.WebControls.DataGrid.OnSortCommand(DataGridSortCommandEventArgs e) +110
System.Web.UI.WebControls.DataGrid.OnBubbleEvent(Object source, EventArgs e) +422
System.Web.UI.Control.RaiseBubbleEvent(Object source, EventArgs args) +26
System.Web.UI.WebControls.DataGridItem.OnBubbleEvent(Object source, EventArgs e) +106
System.Web.UI.Control.RaiseBubbleEvent(Object source, EventArgs args) +26
System.Web.UI.WebControls.LinkButton.OnCommand(CommandEventArgs e) +121
System.Web.UI.WebControls.LinkButton.System.Web.UI.IPostBackEventHandler.RaisePostBackEvent(String eventArgument) +115
System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument) +18
System.Web.UI.Page.RaisePostBackEvent(NameValueCollection postData) +138
System.Web.UI.Page.ProcessRequestMain() +1277"
GeneralRe: Re-sorting Pin
Tony Truong2-Apr-04 17:23
memberTony Truong2-Apr-04 17:23 
GeneralPerfecto! Pin
Phutile25-Mar-04 19:37
sussPhutile25-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 | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 22 Mar 2004
Article Copyright 2004 by Tony Truong
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid