Solved

Need to freeze GridView header

Posted on 2009-04-12
9
2,635 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
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…
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).
Suggested Courses

623 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