April 18, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

A Better Fixed GridView Header for ASP.NET, Page 2

  • August 29, 2007
  • By Paul Kimmel, Paul Kimmel
  • Send Email »
  • More Articles »

Adding the HTML Div and Table Stubs

The GridView will have a header. For the technique for pinning it, you could use the GridView's actual header, but is actually a little easier to use a clone. The reason is that if you pin the GridView's actual header, you have to adjust its position differently when you have scrolled to the top (or you hide row 1), and you might have to account for a positioned header's index when manipulating the data. For these reasons, I elected to use a stub div and table to mimic the fixed header.

Tip: Did you know that a table header is rendered as a <TR> with <TH> children instead of <TD> (cells) children? Did you also know that you can place the row containing the header (or <TH> cells) anywhere in a Table? You can.

To add the div and table stub, open your web page and add the following HTML just above the GridView's tag. Here is the additional HTML followed by complete HTML/ASP for the sample form (in Listing 2).

<div id="fixedHeader" style="position: absolute">
   <table id="header" style="position: absolute">
   </table>
</div>

Listing 2: The complete listing for the sample web page, showing the relationship of the GridView and the HTML that will be used to affix a header.

<%@ Page Language="VB" AutoEventWireup="true"
         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>Fixed Header</title>
<script language="javascript"
        src="fixedHeader.js"
        type="text/javascript"></script>

<script language="javascript" type="text/javascript">

   InitializeFixedHeader("GridView1");

</script>

</head>
<body>
<form id="form2" runat="server">
<div id="fixedHeader" style="position: absolute">
   <table id="header" style="position: absolute">
   </table>
</div>
<div>
<asp:GridView ID="GridView1"
              runat="server"
              Height="200px"
              Width="574px">
   <HeaderStyle BackColor="Navy"
                Font-Bold="True"
                ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>

The control whose ID is fixedHeader and the nested control whose ID is header will ultimately play the role of pinned header. Notice that the <TR> tag containing the <TH> cells is missing. It is the JavaScript that will clone and insert this row and make sure its position is correct that you have to tackle next.

Implementing the JavaScript to Manage the Header over Its Lifetime

This part by far is the most complicated. The bad news is that this solution uses object-oriented JavaScript and the code is a little heavy. The good news is that the code is presented as a .js script file and you only have to write it once, get it working correctly (debug it), and you are done.

To recap, you have a control that renders an HTML table (or an actual HTML table will work). You have a <div> with a <table> that will be used to represent a pinned table, and these two controls will be absolutely positioned (see Listing 2). Finally, you need a couple of hundred lines of JavaScript to handle scrolling, positioning, and resizing of the containing page.

Defining a JavaScript Class

There is a resurgent in interest in JavaScript because of Ajax. Asynchronous ASP.NET/HTTP depends on JavaScript, but JavaScript is powerful in its own right and can still be used to create a better client-web experience (as you are doing here). That said, JavaScript is not really object-oriented but it's close enough.

JavaScript classes are really functions that you use with the new keyword. These special class-like functions can contain fields and methods. Everything is internal (think private in OOP vernacular) unless you explicitly indicate that external callers can have access. So, to define a "class" in JavaScript, you simply define a function and create an instance with the new keyword. Listing 3 contains a really simple example of a page containing a JavaScript class.

Listing 3: A web page containing a JavaScript "class."

<%@ Page Language="VB" AutoEventWireup="false"
         CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!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 runat="server">
   <title>Untitled Page</title>
<script language="javascript">

function Foo()
{
   alert("This is a simple JavaScript class");
}

var foo = new Foo();


</script>
</head>
<body>
   <form id="form1" runat="server">
   <div>

   </div>
   </form>
</body>
</html>




Page 2 of 4



Comment and Contribute

 


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

 

 


Sitemap | Contact Us

Rocket Fuel