Forums Ultimate UI for ASP.NET Web Forms
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
Close
Wallace
1140
WebDialogWindow in an ascx getting lost behind parent elements
posted
We have wrapped up a WebDialogWindow and UltraWebGrid in a view.ascx control.  When the user takes certain actions from the grid, it launches a WebDialogWindow from within the view.ascx control.  The problems occur when we drop the view.ascx inside, for example, a Splitter control.   The WebDialogWindow, if InitialLocation=Centered, tries to center to the entire web page, which, depending on the location of the splitter pane, may place it behind another pane.  Or, worse yet, regardless of the InitialLocation setting, if the user moves the dialog around, it can get disappear over the edges of the pane. 
Also, the web dialog, when modal, only makes the elements in the view.ascx go modal, elements outside the control remain active.
Is it possible to use the WebDialogWindow in this manner?  If so, how can we 1) keep it on top of the page, even though it is part of an ascx 2) get the entire page to go modal while the WebDialog is up?
Thanks 
  • 24497
    Suggested Answer
    posted

    Hi,

    If dialog is located inside of a container and page has some elements with position:absolute/relative, then problems with rendering order may happen. WebDialogWindow is not able to get around them, because those are rendering rules of a browser. 

    The best solution- is to keep dialog directly on main page preferably as last control in form. If that is not possible, then application may try to process ClientEvent.Initialize and move dialog-element to "a better" container, for example to body.
    Below is example.
    Note: if similar action will trigger some side effects, then that approach should not be used.

    function initDialog(dialog, evtArgs)
    {
     var elem = dialog.get_element();
     elem.parentNode.removeChild(elem);
     document.body.appendChild(elem);
     //dialog.show();
    }
    </script>
    <div style="position:absolute;left:200px;top:200px;width:300px;height:300px;overflow:auto;background:cyan;">
      <ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Width="300px" Height="300px" Modal="true" WindowState="Hidden">
       <ClientEvents Initialize="initDialog">
       </ClientEvents>
      </ig:WebDialogWindow>
    </div>