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
2009
Autoresize issue while using WebDialogWindow as MessageBox
posted

HI,

We have a requirement to display messages (Error/info/Warning) to the user on the web portal, we are planning to use the web dialog window to acheive the same.

We may want to show all the following things but if any of them is missing the dialog should resize accordingly

  • Message
  • Description
  • Remediation
  • Buttons (OK/Cancel)

The issue that we are facing is that the dialog does not resize automatically as per the content (i.e. if remediation information is not there the control should automatically resize). Is there a way to do this?

If not, is there any other control that we could use to solve our purpose?

Thanks and regards,

Subodh

  • 24497
    posted

    Hi Subodh,

    The WedDialogWindow does not have property similar to AutoSizeToContent or similar. If content is build from line elements like input, img, span, etc, the actual size of content depends on width/height of their container, so, for general case it is not possible to know which size it should be.

    I can suggest you to wrap possible contents of dialog (probably user controls or whatever) into a DIV or TABLE with strict layout which is different for every content. For example,
    <div style="width:200px;height:200px;">
      // your actual content 1
    </div>

    <div style="width:300px;height:150px;">
      // your actual content 2
    </div>

    etc.
    If it can be done within your application, then you may process ClientEvent.Loaded, find reference to that div-wrapper (first child in content pane), get its width/height and use that value to adjust size of dialog dynamically. Below is example:

    <script type="text/javascript">
    function dialogLoadedEvt(sender, evtArgs)
    {
     var contentPaneDiv = sender.get_contentPane().getBody();
     var div = contentPaneDiv.firstChild;
     // under Firefox and some others, the first child can be #text
     if(div && div.nodeName != 'DIV')
      div = div.nextSibling;
     if(!div || div.nodeName != 'DIV')
      return;
     var width = div.offsetWidth, height = div.offsetHeight;
     // adjust for dialog edges and header
     sender.setSize((width + 30) + 'px', (height + 60) + 'px');
    }
    </script>
    <ig:WebDialogWindow ID="WebDialogWindow1" runat="server">
        <ClientEvents Loaded="dialogLoadedEvt" />
      <ContentPane>
       <Template>
       <div style="width:200px;height:200px;">
         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
         <asp:Button ID="Button1" runat="server" Text="Button" />
       </div>
       </Template>
      </ContentPane>
    </ig:WebDialogWindow>
     

  • 75
    Suggested Answer
    posted

    Subodh,

    I sort of have the same requirement regarding resizing the WebDialogWindow and spent a lot of time last week trying to make this happen on the client side to no avail.

    I ended up using an UpdatePanel around the WebDialogWindow and did the window updates on the server side and we got the results we wanted:  an automatically resized window centered on the screen.  It was pretty simple.

    bmoneilus