Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
523
Position of WebDialogWindow
posted

I have a long page of content and one WebDialogWindow(which is defined at top of the page) that is called from multiple places on the page.  I have the WebDialogWindow setup to be centered and modal.  Works great until you start scrolling down the page and click a link.   It doesn't show up centered correctly, it shows up cutoff or off the page.  Is there anyway to set the WebDialogWindow position based on position on the page?

 

 

 

Parents
  • 24497
    posted

    Hi Rob,

    It would be great to have a simple aspx which can be used to reproduce that issue. If that is not possible or sample is too large, then you may try do following. The most reliable way to ensure that modal WebDialogWindow works correctly is:

    1. Put dialog directly into <form> outside any (div, table, span, etc.) containers.
    2. Dialog should appear as the last control/element on page: at the very bottom of aspx.

    If similar is not possible within your application, then the last resort is to move dialog into form on client. However, in case of modal dialog, the dialog on load/reload of page must be hidden. Otherwise, after a postback, an exception on unload will be raised at the time when dialog will try to clean up its javascript objects. So, application additionally will need to process OnPreRender event and hide dialog explicitly. Below is example which moves dialog on client to the form and hides it on load/reload. You may copy/paste these codes in any temporary website and check how it works.

    aspx.cs:

    protected override void OnPreRender(EventArgs e)
    {
      this.WebDialogWindow1.WindowState = Infragistics.Web.UI.LayoutControls.DialogWindowState.Hidden;
      base.OnPreRender(e);
    }

    aspx:

    <script type="text/javascript">
    function WebDialogWindow1_Initialize(sender, eventArgs)
    {
     var elem = sender.get_element();
     elem.parentNode.removeChild(elem);
     document.forms[0].appendChild(elem);
    }
    function showDialog()
    {
     var dialog = $find('<%=WebDialogWindow1.ClientID%>');
     dialog.show();
    }
    </script>
    <input value="show" type="button" onclick="showDialog()" />
    <div style="border:1px solid red;width:1000px;height:1000px;"></div>
    <table>
      <tr>
      <td>
       <ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Width="200px" Height="200px" Moveable="false" Modal="true" InitialLocation="Centered" MaintainLocationOnScroll="true" WindowState="Hidden">
        <ClientEvents Initialize="WebDialogWindow1_Initialize">
        </ClientEvents>
        <ContentPane>
         <Template>
          <asp:Button ID="Button1" runat="server" Text="Button" />
          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
         </Template>
        </ContentPane>
       </ig:WebDialogWindow>
      </td>
      </tr>
      <tr>
      <td>
       <input value="show" type="button" onclick="showDialog()" />
      </td>
      </tr>
    </table>
    <input value="show" type="button" onclick="showDialog()" />
    <div style="border:1px solid red;height:1000px;"></div>
    <input value="show" type="button" onclick="showDialog()" />

Reply Children