ComponentOne Window for ASP.NET AJAX: Window for ASP.NET AJAX Task-Based Help > Client-Side Tasks > Calling the Show and Hide Methods at Run Time

Calling the Show and Hide Methods at Run Time

You can use JavaScript to call the Show and Hide methods to show or hide a C1Window dialog window. In the following example, you will add a C1Window control to your page and two buttons: one that will show the dialog window and one that will hide the dialog window when shown.

To call the Show and Hide methods, complete the following steps:

1.   Navigate to the Visual Studio Toolbox, and double-click C1Window to add the C1Window control to your page.

2.   Click the control's smart tag () to open the C1Window Tasks menu.

3.   Click on the VisuaStyle drop-down arrow and select Office2007Blue.

4.   Navigate to the Properties window and set the Width property to 210px.

5.   Click on the Source tab to switch to the .aspx code. The following code should appear within the <body> tag of your .aspx file:

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

   

    </div>

        <cc1:C1Window ID="C1Window1" runat="server" AllowResize="True" Height="150px" VisualStyle="Office2007Blue"

            VisualStylePath="~/C1WebControls/VisualStyles" Width="210px" X="0" Y="0">

            <CaptionButtons>

                <CollapseExpandButton Visible="False" />

                <CloseButton Visible="True" />

                <Icon Visible="True" />

                <MaximizeButton Visible="True" />

                <MinimizeButton Visible="True" />

                <PinButton Visible="False" />

                <ReloadButton Visible="False" />

            </CaptionButtons>

        </cc1:C1Window>

    </form>

</body>

6.   Enter the following code after the </cc1:C1Window> tag to create a button to show the dialog window and another button to hide the dialog window:

<br /><strong>Window<br />

    </strong><input id="bShow" type="button" value="Show" onclick="dialog.show()" />

    <input id="bHide" type="button" value="Hide" onclick="dialog.hide()"/><br /><br />

7.   Switch to Design view.

8.   Double-click the Web page to switch to Code view and create an event handler for the Load event.

9.   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)));

This topic illustrates the following:

Run the application and observe that when you click the Show button the dialog window appears and when you click the Hide button the dialog window no longer appears.


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