Hi
It's not right to say that when the modalpopupextender renders, it resets the scrolltop of your panel.
The truth is when an ayncpostback return,it resets the scrolltop of your panel to 0,
AND if your panel is still not be shown,it is noneffective action to set the scrollTop/scrollLeft of the panel.
It is very easy to fix this issue,just show the panel before set the scrollTop/scrollLeft of the it. Code like this:
<%@ Page Language="VB" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Label1.Text = DateTime.Now.ToString()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always">
<ContentTemplate>
<asp:Panel ID="Panel1" onscroll="javascript:saveScroll();" runat="server" Height="50px" Width="125px" Style="position: static;
overflow: scroll; height: 350px; border: solid 1px blue; background-color: White;
display: none;">
<table border="0" cellpadding="0" cellspacing="0" width="480px">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<asp:Button ID="Button3" runat="server" Text="Button" />
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Button" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1"
CancelControlID="Button3" TargetControlID="Button2">
</cc1:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
<script type='text/javascript'>
var scrollLeft = 0;
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
document.getElementById('Button2').click();
setScroll();
}
function setScroll()
{
document.getElementById('<%= Panel1.ClientID %>').scrollLeft = scrollLeft;
}
function saveScroll()
{
scrollLeft = document.getElementById('<%= Panel1.ClientID %>').scrollLeft;
}
</script>
</body>
</html>
If you needn't to popup the panel automaticly after the Ayncpostback return,Just do it as follow:
<%@ Page Language="VB" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Label1.Text = DateTime.Now.ToString()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always">
<ContentTemplate>
<asp:Panel ID="Panel1" onscroll="javascript:saveScroll();" runat="server" Height="50px" Width="125px" Style="position: static;
overflow: scroll; height: 350px; border: solid 1px blue; background-color: White;
display: none;">
<table border="0" cellpadding="0" cellspacing="0" width="480px">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<asp:Button ID="Button3" runat="server" Text="Button" />
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" OnClientClick="javascript:setTimeout(setScroll,1);" Text="Button" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1"
CancelControlID="Button3" TargetControlID="Button2">
</cc1:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
<script type='text/javascript'>
var scrollLeft = 0;
function setScroll()
{
if(document.getElementById('<%= Panel1.ClientID %>').scrollLeft != scrollLeft)
{
document.getElementById('<%= Panel1.ClientID %>').scrollLeft = scrollLeft;
}
}
function saveScroll()
{
scrollLeft = document.getElementById('<%= Panel1.ClientID %>').scrollLeft;
}
</script>
</body>
</html>
Note: In the click event handler you should write "javascript:setTimeout(setScroll,1);" rather than "javascript:setScroll();" ,Because you should wait for a little time(maybe a millisecond) to make sure IE have completely shown the panel.
Thanks
Best Regards