Solved

Need to freeze GridView header

Posted on 2009-04-12
9
2,631 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

827 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