Setting the Splitter Bar Distance at Run Time

ComponentOne Splitter for ASP.NET AJAX: Splitter for ASP.NET AJAX Task-Based Help > Client-Side Tasks > Setting the Splitter Bar Distance 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 change the location of the splitter bar 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 one TextBox control and a Button control to the project by placing the following markup beneath the </cc1:C1Splitter> tag:

Splitter Bar Distance: <input id="Distance" type="text" size="3" value="25"/>&nbsp;

<input id="InputButton" type="button" value="Set" onclick="SetSplitterDistance()"/>

Observe that the onclick event of the button control calls a function named "SetSplitterDistance()". You 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 SetSplitterDistance()

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

};

</script>

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

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

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

Once your project is built, click Set; the splitter bar will be repositioned at 25 pixels from the left side of the control. Now enter different numbers in the Splitter Bar Distance box and click Set again to place the splitter bar in a different location.