You can hide the dialog box until a user performs an action, such as clicking a button. In this topic, you will add a C1Button control and a C1Dialog control to your Web project. When the C1Button control is clicked, it will call the Show() method, thus rendering the dialog box visible.
Complete the following steps:
1. Click the Design tab to enter Design view.
2. From the Toolbox, add a C1Dialog control, a C1Button control, and ScriptManager control to you Web project.
3. Right-click the C1Dialog control to open its context menu and select Properties from the list.
C1Dialog's properties are displayed in the Properties window.
4. Click the DisplayVisible property's drop-down arrow and select False.
5. Right-click the C1Button control to open its context menu and select Properties from the list. Complete the following:
•Set the OnClientClick property to "onButtonClick".
•Set the Text property to "Display Dialog".
6. Click the Source tab to enter Source view.
7. Place the following script, which calls C1Dialog's Show method, beneath the </ScriptManager> tag:
<script type="text/javascript" id="ComponentOneClientScript">
function onButtonClick() {
Sys.Application.findComponent("<%=C1Dialog1.ClientID%>").show();
}
</script>
8. Open the project and click Display Dialog. Observe that the C1Dialog control (it will appear as a gray box) opens.