I have a simple asp:panel control inside my updatepanel. That is then attaced to a modal popup extender. The problem I am having is the scroll position won't retain its value and I can't set it. I have put some hooks in the AJAX events like 'add_endRequest'
and 'add_beginRequest' I collect the scroll position in the add_beginRequest handler and use it in the add_endRequest handler. I have even setup alerts to show me that the value is actually available in the end_Request handler. However, the value won't
attach to the panel.scrolltop property even if it is explicitly set to a value. Here is my code:
<
ajaxE:UpdatePanel
ID="aupOrgsPanel"
runat="server"
updateMode="always">
<ContentTemplate>
<asp:TextBox
ID="hdnScrollTop"
runat="server"></asp:TextBox>
<asp:Panel
ID="pnlOrgs"
runat="server"
style=" position:static; overflow:scroll; height:350px;border:solid 1px blue; background-color:White;">
<table
border="0"
cellpadding="0"
cellspacing="0"
width="480px">
<tr style="background-color:Silver">
<td
valign="Top"
align="left"><div
class="SmallText">Select an Org to continue...</div></td>
<td
valign="top"
align="right"><asp:LinkButton
ID="lbOrgsClose"
runat="server"
CssClass="Navigate2"
Text="X"
ToolTip="Close the Org Selection Tool"></asp:LinkButton></td>
</tr>
</table>
<div
style="width:500px; text-align:left;margin-right:5px;margin-top:2px; margin-bottom:2px">
<asp:TreeView
ID="tvOrgs"
runat="server"
ShowExpandCollapse="true"
ExpandImageUrl="~/Images/Plus.gif"
CollapseImageUrl="~/Images/Minus.gif"></asp:TreeView>
<asp:HiddenField
ID="hidOrgID"
runat="server"
/>
</div>
</asp:Panel>
</ContentTemplate>
<Triggers>
<ajaxE:AsyncPostBackTrigger
ControlID="tvOrgs"
EventName="TreeNodeExpanded"
/>
</Triggers>
</ajaxE:UpdatePanel>
Then I attach some javascript to the bottom of the page:
''add javascript to handle scroll positioning
Dim jS As StringBuilder =
New StringBuilder
jS.Append("<script type='text/javascript'>")
jS.Append("Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);")
jS.Append("Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);")
I'm not sure if it is becuase my panel is being extended by the modalpopupextender or what. But, the code that you gave me responds exactly like my previous code. Let me provide more code, Let me know if you think of anything that may be causing this
issue.
This is the ModalPopupExtender I am using. The issue is this. As the my first posts code shows, I have a treeview inside a panel control. I then have that panel control inside an ajax:updatepanel. That panel is then being extended by the modalpopupextender,
below:
I use the treeview to show organizations, but I only load the first level of organizations. The user must click on the plus sign of the treeview to get the children of that org. Here is that code:
Protected
Sub tvOrgs_TreeNodeExpanded(ByVal sender
As
Object,
ByVal e
As System.Web.UI.WebControls.TreeNodeEventArgs)
Handles tvOrgs.TreeNodeExpanded
'Be sure the modal popup extender stays shown.
mpeOrgs.Show()
~Get some data
For Each drv
In dv
Dim c As
New TreeNode
c.Text = drv("GROUP_NAME").ToString
c.Value = drv("GROUP_ID").ToStringElse
Next
End
Sub
Any thoughts? It's as thought when the modalpopupextender renders, it resets the scrolltop of my panel. Thanks for any help you can provide.
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
Sincerely,
Jin-Yu Yin
Microsoft Online Community Support
buckt
Member
18 Points
9 Posts
ModalPopupExtender panel scroll position
Jul 17, 2007 03:34 PM|LINK
I have a simple asp:panel control inside my updatepanel. That is then attaced to a modal popup extender. The problem I am having is the scroll position won't retain its value and I can't set it. I have put some hooks in the AJAX events like 'add_endRequest' and 'add_beginRequest' I collect the scroll position in the add_beginRequest handler and use it in the add_endRequest handler. I have even setup alerts to show me that the value is actually available in the end_Request handler. However, the value won't attach to the panel.scrolltop property even if it is explicitly set to a value. Here is my code:
<
ajaxE:UpdatePanel ID="aupOrgsPanel" runat="server" updateMode="always"><ContentTemplate>
<asp:TextBox ID="hdnScrollTop" runat="server"></asp:TextBox>
<asp:Panel ID="pnlOrgs" runat="server" style=" position:static; overflow:scroll; height:350px;border:solid 1px blue; background-color:White;">
<table border="0" cellpadding="0" cellspacing="0" width="480px">
<tr style="background-color:Silver">
<td valign="Top" align="left"><div class="SmallText">Select an Org to continue...</div></td>
<td valign="top" align="right"><asp:LinkButton ID="lbOrgsClose" runat="server" CssClass="Navigate2" Text="X" ToolTip="Close the Org Selection Tool"></asp:LinkButton></td>
</tr>
</table>
<div style="width:500px; text-align:left;margin-right:5px;margin-top:2px; margin-bottom:2px">
<asp:TreeView ID="tvOrgs" runat="server" ShowExpandCollapse="true" ExpandImageUrl="~/Images/Plus.gif" CollapseImageUrl="~/Images/Minus.gif"></asp:TreeView>
<asp:HiddenField ID="hidOrgID" runat="server" />
</div>
</asp:Panel>
</ContentTemplate>
<Triggers>
<ajaxE:AsyncPostBackTrigger ControlID="tvOrgs" EventName="TreeNodeExpanded" />
</Triggers>
</ajaxE:UpdatePanel> Then I attach some javascript to the bottom of the page:
''add javascript to handle scroll positioning
Dim jS As StringBuilder = New StringBuilderjS.Append("<script type='text/javascript'>")
jS.Append("Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);")
jS.Append("Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);")
jS.Append("function BeginRequestHandler(sender, args) { ")
jS.Append("var pnl = document.getElementById('" & Me.pnlOrgs.ClientID & "');")
jS.Append("var hid = document.getElementById('" & Me.hdnScrollTop.clientid & "');")
jS.Append("scrollTop = pnl.scrollTop;")
jS.Append("} ") jS.Append("")
jS.Append(
"function EndRequestHandler(sender, args) { ")jS.Append(" var pnl = document.getElementById('" & Me.pnlOrgs.ClientID & "'); ")
jS.Append(" var hid = document.getElementById('" & Me.hdnScrollTop.ClientID & "'); ")
jS.Append(" try { ")
jS.Append(" pnl.scrollTop = scrollTop;")
jS.Append(" alert('End Value of variable: ' + scrollTop + '\n Panel scrolltop: ' + pnl.scrollTop);") --This always returns 'End Value of variable: 204 (or something) Panel scrolltop: 0'
jS.Append(" } ")
jS.Append(" catch(err) {")
jS.Append(" alert(err); ")
jS.Append(" } ")
jS.Append("} ")
jS.Append("</script>") If Not ClientScript.IsStartupScriptRegistered("scrolling") Then
ClientScript.RegisterStartupScript(GetType(String), "scrolling", jS.ToString, False)
End If Any help is appreciated.
Jin-Yu Yin -...
All-Star
21280 Points
1824 Posts
Re: ModalPopupExtender panel scroll position
Jul 19, 2007 07:47 AM|LINK
Hi buckt,
Based on my test, It works,Try the following code:
Best Regards.
Jin-Yu Yin
Microsoft Online Community Support
buckt
Member
18 Points
9 Posts
Re: ModalPopupExtender panel scroll position
Jul 19, 2007 12:29 PM|LINK
I'm not sure if it is becuase my panel is being extended by the modalpopupextender or what. But, the code that you gave me responds exactly like my previous code. Let me provide more code, Let me know if you think of anything that may be causing this issue.
This is the ModalPopupExtender I am using. The issue is this. As the my first posts code shows, I have a treeview inside a panel control. I then have that panel control inside an ajax:updatepanel. That panel is then being extended by the modalpopupextender, below:
<
ajaxControlToolkit:ModalPopupExtender ID="mpeOrgs" runat="server" PopupControlID="pnlOrgs" CancelControlID="lbOrgsClose" TargetControlID="txtSearchFrom" ></ajaxControlToolkit:ModalPopupExtender>I use the treeview to show organizations, but I only load the first level of organizations. The user must click on the plus sign of the treeview to get the children of that org. Here is that code:
Protected
Sub tvOrgs_TreeNodeExpanded(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.TreeNodeEventArgs) Handles tvOrgs.TreeNodeExpanded'Be sure the modal popup extender stays shown.
mpeOrgs.Show()
~Get some data For Each drv In dv
Dim c As New TreeNode
c.Text = drv("GROUP_NAME").ToString
c.Value = drv("GROUP_ID").ToStringElse
Next End Sub
Any thoughts? It's as thought when the modalpopupextender renders, it resets the scrolltop of my panel. Thanks for any help you can provide.
Jin-Yu Yin -...
All-Star
21280 Points
1824 Posts
Re: ModalPopupExtender panel scroll position
Jul 20, 2007 03:55 AM|LINK
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:
If you needn't to popup the panel automaticly after the Ayncpostback return,Just do it as follow:
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
Jin-Yu Yin
Microsoft Online Community Support
Jin-Yu Yin -...
All-Star
21280 Points
1824 Posts
Re: ModalPopupExtender panel scroll position
Jul 20, 2007 04:07 AM|LINK
Hi
The simplest sample of the issue is as follow:
Best Regards
Jin-Yu Yin
Microsoft Online Community Support