inheriting behavior file

**Anthony Jones** · Jun 27 '08, 08:00 PM

Re: inheriting behavior file

"Robert Smith" <RobertSmith@di scussions.micro soft.comwrote in message
news:DB0C855E-85C2-4A6B-9287-FDC4182B8AF5@mi crosoft.com...

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="Defau lt.aspx.cs"
Inherits="Maint ainScrollDemo" %>
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Maintain ScrollDemo</title>
<meta name="GENERATOR " content="Micros oft Visual Studio .NET 7.1"/>
<meta name="CODE_LANG UAGE" content="Visual Basic .NET 7.1"/>
<meta name="vs_defaul tClientScript" content="JavaSc ript"/>
<meta name="vs_target Schema"
content="http://schemas.microso ft.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.a spx"><
Back to article</a</p>
<p align="left">
Here is a demonstration of retaining scroll position in a
<DIVelement 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.U niqueID %>" scrollPOS="<%=
saveScrollPos.V alue %>"
style="OVERFLOW : auto; WIDTH: 400px; HEIGHT: 120px; behavior:
url(ScrollPos.h tc);">
>
<input id="saveScrollP os" type="hidden" runat="server"

name="saveScrol lPos"/>

>
<asp:DataGrid id="dgTwo" runat="server" BorderColor="#D EDFDE"
BorderStyle="No ne" ForeColor="Blac k"
BackColor="Whit e" CellPadding="4" GridLines="Vert ical"
BorderWidth="1p x" width="100%">
>
<SelectedItemSt yle Font-Bold="True" ForeColor="Whit e"

BackColor="#CE5 D5A">

</SelectedItemSty le>
>
<AlternatingIte mStyle BackColor="Whit e">
</AlternatingItem Style>
>
<ItemStyle BackColor="#F7F 7DE">
</ItemStyle>
>
<HeaderStyle Font-Bold="True" ForeColor="Whit e" BackColor="#6B6 96B">
</HeaderStyle>
>
<FooterStyle BackColor="#CCC C99">
</FooterStyle>
<columns>
<asp:ButtonColu mn Text="Select" ButtonType="Pus hButton"
CommandName="Se lect"></asp:ButtonColum n>
</columns>
>
<pagerstyle horizontalAlign ="Right" ForeColor="Blac k" BackColor="#F7F 7DE"
Mode="NumericPa ges">
</pagerstyle>
</asp:DataGrid>
</div></blockquote>
>
</form>
</body>
>
>
Here is my htc file in the same directory as the web form
>
<PUBLIC:ATTAC H EVENT=ondocumen tready ONEVENT="elemen tLoad()" />
<PUBLIC:PROPERT Y NAME="scrollPos " />
<PUBLIC:PROPERT Y NAME="persistID " />
>
// DHTML behavior for scrollable DIV
// (or other scrollable element)
//
// allows element to maintain scroll position within
// the DIV across postbacks.
>
<script language="javas cript">
function elementLoad() {
element.scrollT op = scrollPos;
element.attachE vent("onscroll" , saveScroll);
}
>
function saveScroll() {
element.documen t.all[persistID].value =

event.srcElemen t.scrollTop;

>
}
</script>
>
>
It just seems to get ignored and the datagrid loses its scroll position
after each postback, any idea whats going on???
>

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.getAttribu te("saveScrollI D")
var scrollTop = document.getEle ment(saveID).va lue
elem.scrollTop = scrollTop
elem.onscroll = function()
{
document.getEle ment(saveID).va lue = this.scrollTop
}
elem = null;
}

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

function body_onload()
{
window.setTimeo ut(handleLoad, 100)

function handleLoad()
{
new ScrollPos(docum ent.getElementB yId('idOfDiv')) ;
}
}

</script>
<body onload="body_on load()"

--
Anthony Jones - MVP ASP/ASP.NET

inheriting behavior file

inheriting behavior file

Comment