ASpeak IOpine!

Resize Modal Dialog Box dynamically

Posted on April 2, 2009

This has been a pesky issue in our current project. The requirement is to pop a modal dialog box from a web form. This dialog that appears will contain various user controls based on certain conditions. It may have controls like textbox, tree view, list view, combo box and many others. User will have to select or provide appropriate values in the required fields in this box.

The problem was that the size of the dialog box can not be predetermined and must be generated based on the content of the window. Unlike windows, in web forms we can not generate the pixel sizes of each control and the sum up the vertical space acquired by it and assign that size to the window. Even if it exists I am not aware of it and it might take good amount of time for each form display for each and every user which would be a performance lag. I found a very elegant solution to resize the window as per its content dynamically after the loading of the window. Following is the code snippet for the same:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="frmDyna.aspx.cs" Inherits="frmDyna" %>
 
<!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 runat="server">
    <title></title>
</head>
<script language="javascript" type="text/javascript">
    function PerformResize() {
        ht = (document.body.scrollHeight + 32) + 'px'
        wt = (document.body.scrollWidth + 16) + 'px'
        window.dialogHeight = ht;
        window.dialogWidth = wt;
 
    }
</script>
<body onLoad="PerformResize();">
    <form id="form1" runat="server">
    <asp:Panel ID="Panel1" runat="server" BorderStyle="Dotted" 
        Direction="LeftToRight" Wrap="False">    
    </asp:Panel>
    </form>
</body>
</html>

The caller would use following syntax to call the above form as a modal dialog: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!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 runat="server">
    <title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
    function OpenChild() 
    {
        var WinSettings = "center:yes;resizable:yes;scroll:1;status:0";
        var MyArgs = window.showModalDialog("frmDyna.aspx", null, WinSettings);        
    }
</script>
 
    <form id="form1" runat="server">
    <asp:Panel ID="pnlDyna" runat="server">
        <Button ID="Button1" onclick="OpenChild()"> Button1 </Button>                        
    </asp:Panel>
    </form>
</body>
</html>
Filed under: ASP.NET, DotNET 3 Comments
   

Blogroll

  • Donation Coders

Categories

Recent Posts

Recent Comments

Tags

.NET Framework 3.5 ActiveX archive C# commands console debugging Email Extensibility grep Guid JScript Lambda launch LINQ linux Microsoft MSDN Office2007 powershell practices programming Quotations Quotes run Script scripting sharpziplib shortcut Signature Snippet software Source Code SVN Script Command Code tools Uninstall unix utilities VB.NET VBScript VSTO Windows WScript WSH zip

RSSTwitter: planetcall

Meta

Spam