asked on

Need to freeze GridView header

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

Adam

What exactly do you mean by 'freeze the header rows'? I wasn't aware they moved!

SOLUTION

Nirmalan Nagenthiran

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

qwerty021600

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

allanmark

ASKER

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.

SOLUTION

qwerty021600

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

allanmark

ASKER

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

qwerty021600

Use this as Grid will generate HT for header column

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

allanmark

ASKER

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

allanmark

ASKER

Apologies foir taking so long to close this!