You can easily change the height and width on the C1Expander by setting the Height and Width properties. By default the height of the control is set to 200px and the width of the control is set to 100px. In this topic you'll be able to resize the control at run time. For information about changing the control's height and width in Design view, Source view, and in code, instead, see Resizing the Control.
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 C1Expander 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">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:C1Expander ID="C1Expander1" runat="server" HeaderSize="25px" Height="200px" Width="100px"><Header>Header</Header><Content>Content</Content></cc1:C1Expander>
</div>
</form>
</body>
3. Add the following tags just below the </cc1:C1Expander> tag to add a button and text boxes 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="100"/> <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 oExpander = Sys.Application.findComponent("<%=C1Expander1.ClientID%>");
oExpander.set_height(parseInt(document.getElementById('TxtHeight').value));
oExpander.set_width(parseInt(document.getElementById('TxtWidth').value));
}
</script>
This function will change the C1Expander 's Height and Width properties when the button on the page is clicked.
5. Switch to Design view and note that the page now looks similar to the following:
Run the project and observe:
1. Enter 175 in the Height text box and 250 in the Width text box and click the Set Size button.
The control will resize and appear similar to the following.
2. Enter different values in the text boxes and click the Set Size button again. The control will resize once again.
|
