Solved

Need to freeze GridView header

Posted on 2009-04-12
9
2,629 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
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.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

785 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