Setting the Height and Width at Run Time

ComponentOne Splitter for ASP.NET AJAX: Splitter for ASP.NET AJAX Task-Based Help > Client-Side Tasks > Setting the Height and Width at Run Time

C1Splitter includes a rich and flexible client-side object model that allows you to set the control's properties without postback. In this topic, you'll use this feature to create a client-side script that allows users to seamlessly resize the C1Splitter control at run-time.

Complete the following steps:

1. Add a C1Splitter control to your Web page or application.

2. Click the Source tab to enter Source view.

3. Add two TextBox controls and a Button control to the project by placing the following markup beneath the </cc1:C1Splitter> tag:

        <br />

        Splitter Height: <input id="Height" type="text" size="3" value="150"/>&nbsp;

        Splitter Width: <input id="Width" type="text" size="3" value="150"/>&nbsp;

        <input id="InputButton" type="button" value="Set Splitter Size" onclick="SetSplitterSize()"/>

        <br />

Observe that the onclick event of the button control calls a function named "SetSplitterSize()". We will write this function in the next step.

4. Add the following JavaScript code above the <BODY> tag:

<script id="newScript" type="text/javascript">

function SetSplitterSize()

  $find("<%=C1Splitter1.ClientID%>").set_height(parseInt(document.getElementById('Height').value));

  $find("<%=C1Splitter1.ClientID%>").set_width(parseInt(document.getElementById('Width').value));

};

</script>

6. Click the Design tab to return to Design view. The result resembles the following:

$Description: D:\Whidbey\T109\C1Splitter\WordDocuments\TBH\ClientSide_SetWidthHeightDesign.png$

7. Press F5 to run the program.

$Description: D:\Whidbey\T109\C1Splitter\WordDocuments\Other Graphics\10.png$ This Topic Illustrates the Following:

Once your project is built, click Set Splitter Size and observe that the C1Splitter control has been resized to 150 by 150 pixels without postback. Now enter different numbers in the Splitter Height and Splitter Width boxes and click Set Splitter Size again to reset the control to your specifications.