ASP.NET DataGrid Header Slider Control

• Download source files - 13.8 Kb
• Download demo project - 18.4 Kb

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