You can easily resize the height and width of the dialog window at run time. In the following steps you'll call the get_style().height and get_style().width methods on the client side to resize the dialog window based on values entered in text boxes. In the following example a C1Window dialog window is added to the Web page with two text boxes to enter height and width values and a button to resize the dialog window.

Complete the following steps to resize the dialog window at run time:

1.   In Design view, navigate to the Visual Studio Toolbox, and double-click the C1Window icon to add the C1Window control to your page.

2.   Click on the Source tab to switch to the .aspx code.

3.   Update the <cc1:C1Window> tag to show the dialog window on page load and set the initial dialog window size and location:

<cc1:C1Window ID="C1Window1" runat="server" Height="100px" ShowOnLoad="True" Width="225px" StartPosition="Manual" X="10" Y="80">

4.   Enter the following code just after the </cc1:C1Window> tag to create text box and button controls to set the dialog window height and width:

<strong>Set Dialog Window Height and Width</strong><br/>

<label>Set Height:</label>&nbsp;

<input id="HeightBox" type="text" value="100" style="width:30px"/>&nbsp;

<label>Set Width:</label>&nbsp;&nbsp;

<input id="WidthBox" type="text" value="225" style="width:30px"/>

&nbsp;&nbsp; &nbsp;<input id="resizeButton" runat="server" type="button" value="Resize" onclick="dialog.resize(parseInt(document.getElementById('WidthBox').value), parseInt(document.getElementById('HeightBox').value))" />

5.   Switch to Design view.

6.   Double-click the form to switch to Code view create the Page_Load event handler.

7.   Enter the following code in the Page_Load event to initialize the control:

•      Visual Basic

Form.Controls.Add(New LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID)))

•      C#

Form.Controls.Add(new LiteralControl(String.Format("<script type=text/javascript>setTimeout('window.dialog = {0}.control;',500)</script>", C1Window1.ClientID)));

Run the application and observe:

1.   Enter new values in the height or width text boxes, for example set the Set Height text box to 100 and the Set Width text box to 100.

2.   Click the Resize button.

The dialog window resizes to the entered values:

 

Send comments about this topic to ComponentOne. Copyright © ComponentOne LLC. All rights reserved.