ModalPopupExtender panel scroll position : The Official Microsoft ASP.NET Forums

Reply

buckt

Member

18 Points

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 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);")

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.

Reply

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:

<%@ Page Language="VB" %>

<!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" runat="server" Height="50px" Width="125px" Style="position: static;
                        overflow: scroll; height: 350px; border: solid 1px blue; background-color: White;">
                        <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:Panel>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>

    <script type='text/javascript'>
        var scrollLeft = 0;
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

        function BeginRequestHandler(sender, args) {
        var pnl = document.getElementById('<%= Panel1.ClientID %>');
        scrollLeft = pnl.scrollLeft;
        }

        function EndRequestHandler(sender, args) {
         var pnl = document.getElementById('<%= Panel1.ClientID %>');
         pnl.scrollLeft = scrollLeft;
         alert('End Value of variable: ' + scrollLeft + '\n Panel scrollLeft: ' + pnl.scrollLeft);
         //throw "";
        }
    </script>
</body>
</html>

Best Regards.

Sincerely,
Jin-Yu Yin
Microsoft Online Community Support

Marked as answer by Jin-Yu Yin - MSFT on Jul 19, 2007 08:42 AM

Reply

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.

Reply

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:

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

Sincerely,
Jin-Yu Yin
Microsoft Online Community Support

Marked as answer by Jin-Yu Yin - MSFT on Jul 20, 2007 04:09 AM

Reply

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:

<!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>
    <title>Untitled Page</title>

    <script language="javascript" type="text/javascript">
// <!CDATA[

function Button1_onclick() {
    // But this works

    document.getElementById('div1').style.display = "block";
    document.getElementById('div1').scrollLeft = 100;


    // But this doesn't work

    //document.getElementById('div1').scrollLeft = 100;
    //document.getElementById('div1').style.display = "block";
}

// ]]>
    </script>

</head>
<body>
</body>
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
<div id="div1" style="width: 100px; height: 100px; overflow: scroll; border: solid 1px blue;
    display: none;">
    <table border="0" cellpadding="0" cellspacing="0" width="480px">
        <tr>
            <td>
            </td>
        </tr>
        <tr>
            <td>
            </td>
        </tr>
        <tr>
            <td>
            </td>
        </tr>
    </table>
</div>
</html>

Best Regards

Sincerely,
Jin-Yu Yin
Microsoft Online Community Support

Marked as answer by Jin-Yu Yin - MSFT on Jul 20, 2007 04:08 AM

ModalPopupExtender panel scroll position RSS

4 replies

buckt

ModalPopupExtender panel scroll position

Jin-Yu Yin -...

Re: ModalPopupExtender panel scroll position

buckt

Re: ModalPopupExtender panel scroll position

Jin-Yu Yin -...

Re: ModalPopupExtender panel scroll position

Jin-Yu Yin -...

Re: ModalPopupExtender panel scroll position

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft