Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Need to freeze GridView header

Posted on 2009-04-12
9
Medium Priority
?
2,639 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:Adam
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 500 total points
ID: 24127747
0
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 900 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…
Suggested Courses

722 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