inheriting behavior file

R

Robert Smith

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

<%@ 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
 
A

Anthony Jones

Robert Smith said:
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

<%@ 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???
Click to expand...

HTCs are arcane, ancient and very IE-centric. I wouldn't avoid them.

Use something like this (warning untested):-

//ScrollPos.js
function ScrollPos(elem)
{
var saveId = elem.getAttribute("saveScrollID")
var scrollTop = document.getElement(saveID).value
elem.scrollTop = scrollTop
elem.onscroll = function()
{
document.getElement(saveID).value = this.scrollTop
}
elem = null;
}

<script type="text/javascript" src="ScrollPost.js"></script>
<script type="text/javascript">

function body_onload()
{
window.setTimeout(handleLoad, 100)

function handleLoad()
{
new ScrollPos(document.getElementById('idOfDiv'));
}
}

</script>
<body onload="body_onload()"
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Trying to use FindControl 11
Hiding item in DataGrid 1
Error in converting app from 1.1 to framework 2.0 25
Troubles with Fullpage / please help 0
Centering a button using flexbox 2
Please Help? 0
I need help making a zooming function 11
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3

Members online

No members online now.
Total: 67 (members: 1, guests: 66)
Robots: 503

Forum statistics

Threads
473,969
Messages
2,570,161
Members
46,710
Latest member
bernietqt

Latest Threads

Top