In this topic, you will add a close button to the C1Dialog control using a C1Button control. When the C1Button control is clicked, the Hide() method will be called, thus rendering the dialog box invisible. This topic assumes that you have created an AJAX-enabled ASP.NET project that contains a ScriptManager control (see Creating an AJAX-Enabled ASP.NET Project) and a C1Dialog control.
Complete the following steps:
1. Click Source to enter Source view.
2. In the Source pane, add the following markup between the <cc1:C1Dialog> and </cc1:C1Dialog> tags:
<Content>
</Content>
3. Place your cursor between the <Content> and </Content> tags, navigate to the Toolbox, and double-click C1Button to add it to the dialog box.
4. Click anywhere within the <cc2:C1Button> tag to bring up C1Button's properties in the Properties window, and then set the following properties:
•Set the ButtonType property to Destructive.
•Set the Text property to "Cancel".
•Set the OnClientClick property to "C1Button1_OnClientClick".
5. Place the following JavaScript after the </ScriptManager> tag:
<script type="text/javascript" id="ComponentOneClientScript">
function C1Button1_OnClientClick(button) {
Sys.Application.findComponent("<%=C1Dialog1.ClientID%>").hide();
};
</script>
6. Open the project in a Studio for iPhone-compatible browser.
7. Click Close and observe that clicking the button closes the dialog box.