Solved

Need to freeze GridView header

Posted on 2009-04-12
9
2,628 Views
Last Modified: 2012-08-13
Greetings all

I am looking (desparately!!) for a way to freeze the header rows of a Grdiview.

I have looked at several over the past couple of days, but found several problems -- some were VS2003 and the DOC type was HTML 4.0 - when I applied the code to a VS2005 page (XHTML 1.0 )  everything became scrunched up; others advocated setting Event validation to false, which we are not keen to do;

Any thoughts?



In advance, thanks!!!
   allanmark
0
Comment
Question by:allanmark
9 Comments
 
LVL 12

Expert Comment

by:Cyber-spy
ID: 24127214
What exactly do you mean by 'freeze the header rows'? I wasn't aware they moved!
0
 
LVL 12

Assisted Solution

by:Nirmalan Nagenthiran
Nirmalan Nagenthiran earned 125 total points
ID: 24127747
0
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 225 total points
ID: 24128115
A dummy or example code to fix the header

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>
<style>
@charset "utf-8";
/* CSS Document */

div.tableContainer {
      width: 65%;            /* table width will be 99% of this*/
      height: 295px;       /* must be greater than tbody*/
      overflow: auto;
      margin: 0 auto;
      }

table {
      width: 99%;            /*100% of container produces horiz. scroll in Mozilla*/
      border: none;
      background-color: #f7f7f7;
      }
      
table>tbody      {  /* child selector syntax which IE6 and older do not support*/
      overflow: auto;
      height: 250px;
      overflow-x: hidden;
      }
      
thead tr      {
      position:relative;
      top: expression(offsetParent.scrollTop); /*IE5+ only*/
      }
      
thead td, thead th {
      text-align: center;
      font-size: 14px;
      background-color: oldlace;
      color: steelblue;
      font-weight: bold;
      border-top: solid 1px #d8d8d8;
      }      
      
td      {
      color: #000;
      padding-right: 2px;
      font-size: 12px;
      text-align: right;
      border-bottom: solid 1px #d8d8d8;
      border-left: solid 1px #d8d8d8;
      }
      
table tfoot tr { /*idea of Renato Cherullo to help IE*/
      position: relative;
      overflow-x: hidden;
      top: expression(parentNode.parentNode.offsetHeight >=
        offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
      }


tfoot td      {
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      background-color: papayawhip;
      color: steelblue;
      border-top: solid 1px slategray;
      }

td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/

</style>

</head>

<body>
<div id="container">
  <div class="tableContainer">
    <table cellspacing="0">
      <thead>
        <tr>
          <td width="18%">Station</td>
          <td width="38%">Date</td>
          <td width="28%">Status</td>
          <td width="16%">Num.</td>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="5">Table footer repeats on print</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>1</td>
          <td>09/12/2002</td>
          <td>2</td>
          <td>0</td>
        </tr>
        <tr>
          <td>3</td>
          <td>09/11/2002</td>
          <td>4</td>
          <td>2</td>
        </tr>
        <tr>
          <td>5</td>
          <td>09/11/2002</td>
          <td>6</td>
          <td>1</td>
        </tr>
 
      </tbody>
    </table>
  </div>
</div>
</body>
</html>
0
 

Author Comment

by:allanmark
ID: 24128304
Cyber-spy

WHat I mean is that I want to scroll the grid, instead of using paging. The scrolling is doable, but then the column headers alsos croll out of sight.

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 13

Assisted Solution

by:qwerty021600
qwerty021600 earned 225 total points
ID: 24128332
Create a DIV of fixed size. Place this style for TH.. which you want to fix
thead tr      {
      position:relative;
      top: expression(offsetParent.scrollTop); /*IE5+ only*/
      }
0
 

Author Comment

by:allanmark
ID: 24128438
Hi qwerty

Not sure what I did wrong (see attached source), but no go.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default9.aspx.cs" Inherits="Default9" %>
 

<!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>

   

   <style>

   thead tr      {

      position:relative;

      top: expression(offsetParent.scrollTop); /*IE5+ only*/

      }

   </style>

   

</head>

<body>

    <form id="form1" runat="server">

    <div style="height:200px; width:400px; overflow:scroll">

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="C_Id"

            DataSourceID="SqlDataSource1" HeaderStyle-CssClass="thead" >

            <Columns>

                <asp:BoundField DataField="C_Id" HeaderText="C_Id" InsertVisible="False" ReadOnly="True"

                    SortExpression="C_Id" />

                <asp:BoundField DataField="C_Surname" HeaderText="C_Surname" SortExpression="C_Surname" />

                <asp:BoundField DataField="C_Mar_Status" HeaderText="C_Mar_Status" SortExpression="C_Mar_Status" />

                <asp:BoundField DataField="C_Wed_Anniv" HeaderText="C_Wed_Anniv" SortExpression="C_Wed_Anniv" />

                <asp:BoundField DataField="C_Email" HeaderText="C_Email" SortExpression="C_Email" />

            </Columns>

        </asp:GridView>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MarriageEncounter %>"

            SelectCommand="SELECT [C_Id], [C_Surname], [C_Mar_Status], [C_Wed_Anniv], [C_Email] FROM [Couples]">

        </asp:SqlDataSource>

    

    </div>

    </form>

</body>

</html>

Open in new window

0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24128540
Use this as Grid will generate HT for header column

th
 {
      position:relative;
     top: expression(offsetParent.scrollTop); /*IE5+ only*/
  }
0
 

Author Comment

by:allanmark
ID: 24128579
Added "th" style. Not sure what else I have to do (sorry - I've really hiot a blank on this one!!)

Attached:

SOURCE
PAGE SOURCE
SOURCE:
 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default9.aspx.cs" Inherits="Default9" %>
 

<!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>

   

   <style>

   

   th

 {

      position:relative;

     top: expression(offsetParent.scrollTop); /*IE5+ only*/

  }

   

   </style>

   

</head>

<body>

    <form id="form1" runat="server">

    <div style="overflow:auto; height:200px; width:400px">

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="C_Id"

            DataSourceID="SqlDataSource1" >

            <Columns>

                <asp:BoundField DataField="C_Id" HeaderText="C_Id" InsertVisible="False" ReadOnly="True"

                    SortExpression="C_Id" />

                <asp:BoundField DataField="C_Surname" HeaderText="C_Surname" SortExpression="C_Surname" />

                <asp:BoundField DataField="C_Mar_Status" HeaderText="C_Mar_Status" SortExpression="C_Mar_Status" />

                <asp:BoundField DataField="C_Wed_Anniv" HeaderText="C_Wed_Anniv" SortExpression="C_Wed_Anniv" />

                <asp:BoundField DataField="C_Email" HeaderText="C_Email" SortExpression="C_Email" />

            </Columns>

        </asp:GridView>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MarriageEncounter %>"

            SelectCommand="SELECT [C_Id], [C_Surname], [C_Mar_Status], [C_Wed_Anniv], [C_Email] FROM [Couples]">

        </asp:SqlDataSource>

    

    </div>

    </form>

</body>

</html>
 
 

PAGE SOURCE:
 
 

<!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><title>

	Untitled Page

</title>

   

   <style>

   

   th

 {

      position:relative;

     top: expression(offsetParent.scrollTop); /*IE5+ only*/

  }

   

   </style>

   

</head>

<body>

    <form name="form1" method="post" action="Default9.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Rp23KhXF9dt1xxUZecLEAK8dYzVLWB4mIEPEwWKPamPw1Q458jILgQuj2LcMNq8pThiGuYPT5jo2nj6orFPkIJJxiFmX64agoo+PQleSlVVuezg0C35YNAooI9hg17uYjFLdh817lkSHINsCAHUTjT4App68YMHo3csIfWeK589NLwGPl6iKR6AZRwu8t41Iniyx7w0zirZpRVtRqcIUhEB68TLyoba3xy+dicuymSDCP8JeZ3juw1nfi7SjJPJnal6+eNFQN+HnL0GGIuv0+vXg8JaZ79vXSpJGOsvEVN/d0x0O6ZrS0w0qNU3AfhLsZN2DJpl4SHzijVJ2p1qjrIBCHAVvjqslrPMLF4hCTIeJ/LziUMAUmikhqHD2nSwoFcXrt8ETVcKwoPAjxubeuDyk0ojtVcZ05ZU3VEfhwLIHRYUvRJXvUa6JCRLgMGCzofCSju8ZT63LRuKB+UP9x5cv6ONlAEQexlY6XWBMRjkIbcYIcGpIfcPwk/15wPUMQkGwsAOCQNgGrBKPBXjsTnSedhK3p+4kearKbMvSU3scNYHYKbWENOKDJf/duiwQhp/75tcDtBrZ4X0wBM68XXSPBLZM78agBGn/YBS2IrDALMmWPBjic4KJeLFNHzKgcbrlV3THyqO4eSi+lMSZdpqoXOkG5H3LEZtPxX7Q6lD62XmZM3y7xo9QljVeo0hUjsf56l6beVGp+UCyFQVt1Pa+LZnDD7CY0nbRfYA4ggqJ1EADEiutI3S2FAyhAjPJd+viXTZl4XOLRwgeR7ry5o1u8PIUNx5i9AK1AmGWaL5n7fX7RHY/0kE7Ndi0hxVMXFaN/sKvYDXaSlIrFaWXIc7Yl4AD29BH8QWirCC85aeMyIsKLjOWLiLi2B96TuMSVa0oytdkATAYmc7p0UdJcrVlgRZ+CWkInfsfyswWCPg3ikoH3zwUwfYY+zqrZ4vGRadPIlciDcB28/PCJk9H6du2BfZTxds5tQycX1uWFX6NjhYgVLwbkMbH3ASFXy/vbV8nRhsMr+eGCR+rRmgt2eLvvkNLD6e72WTFxT5dt+8yopVt4kyQlsA1Tt9gjmhSIPhCVEDKwrcncdI0oldTdOPHrB5xunzbzc0iPc0m6l6W0u1TIQl8r3q0rTCAwbx3yt93DwhfX/wDyyIy3QbITTVTrPyVRi933IXTSngWOnmInCz/kqANcL9lOBNg0sJpggKSW0yihRv/Vf0Nht4DbYHnqKrinA84B9n7Yr705FaV1itTFL7SbYpoqHb7y24iT0LRDo8MJtxt6yHuZ1x1WNORGzERXeRRgHvQ+IHPUaYZDfLvMjDTh5TmmSh0yU2YiVpUGBmMwsCB8pQP9RjYozeqXtI+C/rQqH7ZCw/CLRcG7oqSH6gM3yukfc4ekWGmcxlfaSJqOyaFUv0Ea2o08+YqldPfWUXakP7XAiIcY+aIqZxwJpsppKDadAB/oZW8T3UFHR9SOGE18yAoCB3fj20GSAJHoGsiWHShyH9rJ6M=" />
 

</div>
 

<div>
 

	<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />

</div>

    <div style="overflow:auto; height:200px; width:400px">

        <div>

	<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">

		<tr>

			<th scope="col">C_Id</th><th scope="col">C_Surname</th><th scope="col">C_Mar_Status</th><th scope="col">C_Wed_Anniv</th><th scope="col">C_Email</th>
 

		</tr><tr>

			<td>1</td><td>Van Riel</td><td>M</td><td>1999/04/30 12:00:00 AM</td><td>avriel@mweb.co.za</td>

		</tr><tr>

			<td>2</td><td>Thomas</td><td>M</td><td>1989/06/22 12:00:00 AM</td><td>lewie@mweb.co.za</td>
 

		</tr><tr>

			<td>3</td><td>Jones</td><td>&nbsp;</td><td>&nbsp;</td><td>lewie@mweb.co.za</td>

		</tr><tr>

			<td>4</td><td>Brown</td><td>&nbsp;</td><td>&nbsp;</td><td>lewie@mweb.co.za</td>

		</tr><tr>

			<td>5</td><td>Van Der Merwe</td><td>&nbsp;</td><td>&nbsp;</td><td>lewie@mweb.co.za</td>
 

		</tr><tr>

			<td>6</td><td>Peters</td><td>&nbsp;</td><td>&nbsp;</td><td>lewie@mweb.co.za</td>

		</tr><tr>

			<td>7</td><td>Smith</td><td>&nbsp;</td><td>&nbsp;</td><td>lewie@mweb.co.za</td>

		</tr><tr>

			<td>8</td><td>Ciders</td><td>&nbsp;</td><td>&nbsp;</td><td>lewie@mweb.co.za</td>
 

		</tr><tr>

			<td>9</td><td>Du Preez</td><td>&nbsp;</td><td>&nbsp;</td><td>lewie@mweb.co.za</td>

		</tr>

	</table>

</div>

        

    

    </div>

    </form>

</body>
 

</html>

Open in new window

0
 

Author Closing Comment

by:allanmark
ID: 31569373
Apologies foir taking so long to close this!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now