December 21, 2014
Hot Topics:

Implementing a Fixed GridView Header in ASP.NET

  • February 17, 2006
  • By Paul Kimmel
  • Send Email »
  • More Articles »

Listing 3 shows a revised Listing 1, containing the new style for the GridView-cum-table.

Listing 3: Listing 1 Revised to Contain the Additional Style Definition

<%@ Page Language="VB" AutoEventWireup="false"
         CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
   <title>Untitled Page</title>
<style type="text/css">
.fixedHeader
{
   overflow: auto;
   height: 150px;
}
table th
{
   border-width: 4px;
   border-color: Black;
   background-color: Gray;
   position: relative;
   top: expression(this.parentNode.parentNode.
                   parentNode.scrollTop-1);
}
</style>
</head>
<body>
   <form id="form2" runat="server">

The new style applies to any table on this page with a subordinate table header (th). The first three properties defined a border and the background color of the header. The position attribute and the top attribute complete the fixed-header effect. Position relative means that the object is positioned relatively to the normal flow and then offset by the top and left properties. The top attribute is calculated as a result of the expression. The expression refers to the table header's ancestor three levels up, which is the table itself. This code should always work, but you can try getElementByID too.

Listing 4, a partial listing of the rendered HTML page, shows that the table header is nested three levels below the table. The first parent is <tr>, the second parent is <tbody>, and the third parent is the <table> itself.

Listing 4: Partial Listing of the Rendered HTML Page

<div id="Panel1" class="fixedHeader"
     style="height:150px;width:200px;overflow-y:scroll;">
   <div>
      <table cellspacing="0"
             rules="all"
             border="1"
             id="GridView1"
             style="border-collapse:collapse;">
      <tr>
         <th scope="col">Column1</th><th scope="col">Column2</th>
      </tr>

When you have added the table th style and run the code, the grid should appear to scroll while the header remains in place (see Figure 1). The technique works pretty well, but the thick table header border is used to hide text that scrolls above the header. Also, you may find it difficult to tuck the information rows—everything but the header—up tight against the header without scrolling data above the header. Some experimentation may be necessary to get the header and nested grid to look natural in the panel.

Figure 1: The GridView Scrolled Halfway Past the Fourth Item

Underneath It All, Just HTML

Good old HTML knowledge is still useful for accomplishing tasks like fixed grid headers.

This article used cascading styles and the new Panel and GridView to fix a header while permitting a grid to scroll. Although it used new controls to demonstrate the technique, it is important to note that ASP.NET Web controls emit HTML underneath, so the technique should work in a vanilla editor with plain HTML tags.

About the Author

Paul Kimmel is the VB Today columnist for www.codeguru.com and has written several books on object-oriented programming and .NET. Check out his new book UML DeMystified from McGraw-Hill/Osborne and his upcoming book C# Express for the Professional Programmer from Addison Wesley (Spring 2006). Paul is an architect for Tri-State Hospital Supply Corporation. You may contact him for technology questions at pkimmel@softconcepts.com.

If you are interested in joining or sponsoring a .NET Users Group then checkout www.glugnet.org.

Copyright © 2006 by Paul T. Kimmel. All Rights Reserved.





Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel