Hi,
I have a behavior file called ScrollPos.htc, which is supposed to
maintain the scroll position of a datagrid within a div tag.
In my html I have
<% [at] Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="MaintainScrollDemo" %>
<!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>MaintainScrollDemo</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"/>
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1"/>
<meta name="vs_defaultClientScript" content="JavaScript"/>
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5"/>
<link href="../Styles.css" type="text/css" rel="stylesheet"/>
</head>
<body MS_POSITIONING="FlowLayout">
<form id="form1" runat="server">
<p align="center">
<a href="Default.aspx"><
Back to article</a> </p>
<p align="left">
Here is a demonstration of retaining scroll position in a
<DIV> element that is being used to add scroll bars to a DataGrid.
Try scrolling both grids a few rows, then make the form post back by
clicking any of the Select buttons in either grid. </p>
</blockquote>
<h1 align="center">This Grid Will Retain Scroll Position</h1>
<blockquote style="TEXT-ALIGN: center">
<% string scrollPosURL = "../ScrollPos.htc";%>
<div persistID="<%= saveScrollPos.UniqueID %>" scrollPOS="<%=
saveScrollPos.Value %>"
style="OVERFLOW: auto; WIDTH: 400px; HEIGHT: 120px; behavior:
url(ScrollPos.htc);">
<input id="saveScrollPos" type="hidden" runat="server" name="saveScrollPos"/>
<asp:DataGrid id="dgTwo" runat="server" BorderColor="#DEDFDE"
BorderStyle="None" ForeColor="Black"
BackColor="White" CellPadding="4" GridLines="Vertical"
BorderWidth="1px" width="100%">
<SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#CE5D5A">
</SelectedItemStyle>
<AlternatingItemStyle BackColor="White">
</AlternatingItemStyle>
<ItemStyle BackColor="#F7F7DE">
</ItemStyle>
<HeaderStyle Font-Bold="True" ForeColor="White" BackColor="#6B696B">
</HeaderStyle>
<FooterStyle BackColor="#CCCC99">
</FooterStyle>
<columns>
<asp:ButtonColumn Text="Select" ButtonType="PushButton"
CommandName="Select"></asp:ButtonColumn>
</columns>
<pagerstyle horizontalAlign="Right" ForeColor="Black" BackColor="#F7F7DE"
Mode="NumericPages">
</pagerstyle>
</asp:DataGrid>
</div></blockquote>
</form>
</body>
Here is my htc file in the same directory as the web form
<PUBLIC:ATTACH EVENT=ondocumentready ONEVENT="elementLoad()" />
<PUBLIC:PROPERTY NAME="scrollPos" />
<PUBLIC:PROPERTY NAME="persistID" />
// DHTML behavior for scrollable DIV
// (or other scrollable element)
//
// allows element to maintain scroll position within
// the DIV across postbacks.
<script language="javascript">
function elementLoad() {
element.scrollTop = scrollPos;
element.attachEvent("onscroll", saveScroll);
}
function saveScroll() {
element.document.all[persistID].value = event.srcElement.scrollTop;
}
</script>
It just seems to get ignored and the datagrid loses its scroll position
after each postback, any idea whats going on???
Thanx in advance
Robert
