You can easily change the height and width on the C1SuperPanel by setting the Height and Width properties. In this topic you'll be able to resize the control at run time.
To set the control's Height and Width properties at run time, create a new AJAX-Enabled Web site project and complete the following steps:
1. Navigate to the Visual Studio Toolbox and double-click the C1SuperPanel icon to add the control to your page.
2. Click on the Source tab to switch to Source view, and note that the body of the page looks similar to the following:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
</div>
<cc1:C1SuperPanel ID="C1SuperPanel1" runat="server">
</cc1:C1SuperPanel>
</form>
</body>
3. Add the following tags just below the </cc1:C1Superpanel> tag to add a button and textboxes to set the Height and Width properties.
<br />Height: <input id="TxtHeight" type="text" size="3" value="200"/> Width: <input id="TxtWidth" type="text" size="3" value="200"/> <input id="Button3" type="button" value="Set Size" onclick="SetSize()"/>
4. At the top of the page, add the following JavaScript just above the opening <html> tag:
<script language="javascript" type="text/javascript">
function SetSize()
{
var oSuperPanel = Sys.Application.findComponent("<%=C1SuperPanel1.ClientID%>");
oSuperPanel.set_height(parseInt(document.getElementById('TxtHeight').value));
oSuperPanel.set_width(parseInt(document.getElementById('TxtWidth').value));
}
</script>
This function will change the C1SuperPanel's Height and Width properties when the button on the page is clicked.
Run the project and observe:
1. The SuperPanel control’s Height changes to 200 and its Width changes to 200.
2. Enter different values in the Height and Width textboxes and click the Set Size button. The control will resize once again.
|
