Tags: ajax, aspnet, asppanel, attaced, control, extender, inside, modal, modalpopupextender, net, panel, popup, position, scroll, updatepanel

ModalPopupExtender panel scroll position

On .Net » ASP.NET AJAX

32,540 words with 4 Comments; publish: Sun, 06 Jan 2008 06:48:00 GMT; (10046.88, « »)

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:UpdatePanelID="aupOrgsPanel"runat="server"updateMode="always">

<ContentTemplate>

<asp:TextBoxID="hdnScrollTop"runat="server"></asp:TextBox>

<asp:PanelID="pnlOrgs"runat="server"style=" position:static; overflow:scroll; height:350px;border:solid 1px blue; background-color:White;">

<tableborder="0"cellpadding="0"cellspacing="0"width="480px">

<trstyle="background-color:Silver">

<tdvalign="Top"align="left"><divclass="SmallText">Select an Org to continue...</div></td>

<tdvalign="top"align="right"><asp:LinkButtonID="lbOrgsClose"runat="server"CssClass="Navigate2"Text="X"ToolTip="Close the Org Selection Tool"></asp:LinkButton></td>

</tr>

</table>

<divstyle="width:500px; text-align:left;margin-right:5px;margin-top:2px; margin-bottom:2px">

<asp:TreeViewID="tvOrgs"runat="server"ShowExpandCollapse="true"ExpandImageUrl="~/Images/Plus.gif"CollapseImageUrl="~/Images/Minus.gif"></asp:TreeView>

<asp:HiddenFieldID="hidOrgID"runat="server"/>

</div>

</asp:Panel>

</ContentTemplate>

<Triggers>

<ajaxE:AsyncPostBackTriggerControlID="tvOrgs"EventName="TreeNodeExpanded"/>

</Triggers>

</ajaxE:UpdatePanel>

Then I attach some javascript to the bottom of the page:

''add javascript to handle scroll positioning

Dim jSAs 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>")

IfNot ClientScript.IsStartupScriptRegistered("scrolling")Then

ClientScript.RegisterStartupScript(GetType(String),"scrolling", jS.ToString,False)

EndIf

Any help is appreciated.

All Comments

Leave a comment...

  • 4 Comments
    • Hi buckt,

      Based on my test, It works,Try the following code:

      <%.net-ajax.todaysummary.com. 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'>

      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.

      #1; Sun, 06 Jan 2008 06:49:00 GMT
    • 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:ModalPopupExtenderID="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:

      ProtectedSub tvOrgs_TreeNodeExpanded(ByVal senderAsObject,ByVal eAs System.Web.UI.WebControls.TreeNodeEventArgs)Handles tvOrgs.TreeNodeExpanded

      'Be sure the modal popup extender stays shown.

      mpeOrgs.Show()

      ~Get some data

      ForEach drvIn dv

      Dim cAsNew TreeNode

      c.Text = drv("GROUP_NAME").ToString

      c.Value = drv("GROUP_ID").ToStringElse

      Next

      EndSub

      Any thoughts? It's as thought when the modalpopupextender renders, it resets the scrolltop of my panel. Thanks for any help you can provide.

      #2; Sun, 06 Jan 2008 06:50:00 GMT
    • 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,

      ,Because you should wait for a little time(maybe a millisecond) to make sure IE have completely shown the panel.

      Thanks

      Best Regards

      #3; Sun, 06 Jan 2008 06:51:00 GMT
    • 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[

      // ]]>

      </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

      #4; Sun, 06 Jan 2008 06:52:00 GMT