Click here to Skip to main content
11,642,855 members (69,664 online)
Click here to Skip to main content

ASP.NET DataGrid Header Slider Control

, 21 Mar 2004 118.9K 2.6K 41
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

Introduction

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!

Example:

<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" 
         BackColor="Gainsboro"></AlternatingItemStyle>
   <ItemStyle Font-Size="X-Small" Font-Names="Verdana"></ItemStyle>
   <HeaderStyle Font-Bold="True" BackColor="#D7D7D7"></HeaderStyle>
   <Columns>
      <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" 
           SortExpression="Authors"></asp:BoundColumn>
   </Columns>
   </asp:datagrid>
   <cc1:GridSlideHeader id="GridSlideHeader1" 
           runat="server" DataGridID="DataGridReport1" />
</form>

Conclusion

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~...

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

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 3:24
membereyadAdwan3-Aug-06 3:24 
GeneralError Creating Control Pin
CarlesP3-Jul-06 10:51
memberCarlesP3-Jul-06 10:51 
GeneralDos it work with DatagridView Pin
Omar20035-Mar-06 19:12
memberOmar20035-Mar-06 19:12 
QuestionUmm? Pin
ARandomUserWithYourBestInterests23-Feb-05 8:46
sussARandomUserWithYourBestInterests23-Feb-05 8:46 
GeneralVery Good Pin
Omar200315-Feb-05 19:08
memberOmar200315-Feb-05 19:08 
GeneralAdditions Pin
FattyMonkey20-May-04 4:21
memberFattyMonkey20-May-04 4:21 
GeneralWorks like a Champ Pin
Chuckle17-May-04 19:40
memberChuckle17-May-04 19:40 
GeneralRe: Works like a Champ Pin
Tony Truong17-May-04 20:03
memberTony Truong17-May-04 20:03 
GeneralGood for simple layouts, bails *hard* on more complex pages Pin
yourlordjesus24-Apr-04 14:45
sussyourlordjesus24-Apr-04 14:45 
Smile | :) Nice and simple and works a treat on most pages.
Managed to kill vs.net in design mode though, with a page containing 6 datagrids - only the bottom one had your control associated with it. After adding the control tag in html and switching back to design view, memory and cpu usage went through the roof - had to kill the process@100% cpu and 800MB virtual memory!Cry | :((

The page is kinda complex, and I've yet to narrow down what causes this exactly, but will keep you posted- will try gradually removing sections of the page until it no longer dies etc, etc.
GeneralAdding to toolbox in VS.Net Pin
lillrune15-Apr-04 3:55
memberlillrune15-Apr-04 3:55 
Generalawesome Pin
syusman4-Apr-04 17:19
membersyusman4-Apr-04 17:19 
QuestionDosn't work with div tags? Pin
Calle Manthey30-Mar-04 0:25
sussCalle Manthey30-Mar-04 0:25 
AnswerRe: Dosn't work with div tags? Pin
Anonymous25-May-04 16:56
sussAnonymous25-May-04 16:56 
GeneralRe: Dosn't work with div tags? Pin
Tony Truong25-May-04 19:08
memberTony Truong25-May-04 19:08 
GeneralDoesn't work with Mozilla Pin
Anonymous27-Mar-04 2:13
sussAnonymous27-Mar-04 2:13 
GeneralRe: Doesn't work with Mozilla Pin
Tony Truong27-Mar-04 10:17
memberTony Truong27-Mar-04 10:17 
GeneralRe: Doesn't work with Mozilla Pin
Anonymous28-Mar-04 23:36
sussAnonymous28-Mar-04 23:36 
GeneralRe: Doesn't work with Mozilla Pin
Tony Truong29-Mar-04 6:41
memberTony Truong29-Mar-04 6:41 
GeneralRe: Doesn't work with Mozilla Pin
smortensen24-Apr-04 14:50
membersmortensen24-Apr-04 14:50 
GeneralRe-sorting Pin
Anonymous26-Mar-04 4:01
sussAnonymous26-Mar-04 4:01 
GeneralRe: Re-sorting Pin
Tony Truong26-Mar-04 4:23
memberTony Truong26-Mar-04 4:23 
GeneralRe: Re-sorting Pin
Anonymous2-Apr-04 3:21
sussAnonymous2-Apr-04 3:21 
GeneralRe: Re-sorting Pin
Tony Truong2-Apr-04 16:23
memberTony Truong2-Apr-04 16:23 
GeneralPerfecto! Pin
Phutile25-Mar-04 18:37
sussPhutile25-Mar-04 18: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
Web04 | 2.8.150731.1 | Last Updated 22 Mar 2004
Article Copyright 2004 by Tony Truong
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid