In this topic, you will write a client-side script that will allow users to change the orientation of the progress bar at run time. This topic assumes that you have created an ASP.NET AJAX-Enabled Web site containing a ScriptManager control and a C1ProgressBar control.
Complete the following:
1. Click the Source tab to enter Source view.
2. Place the following markup beneath the <c1:C1ProgressBar> tag:
<select id="Select1" onchange="changeOrientation(this.value)" name="orientationChange">
<option selected="selected" value="0">Horizontal</option>
<option value="1">Vertical</option>
</select>
This markup creates a drop-down list with two options: Horizontal and Vertical. Each option has been assigned a value, which you will use later to determine the user's input.
Notice that the onchange event of the list has been set to “changeOrientation(this.value)”. changeOrientation is the name of the function you’ll create in the next step. Whenever the selection of the drop-down list has changed, this.value (the value of the drop-down list selection) will be passed to the changeOrientation function.
3. Place the following JavaScript after the <body> tag:
<script type="text/javascript">
function changeOrientation(listval)
{
var pb = Sys.Application.findComponent("<%=C1ProgressBar1.ClientID%>");
if(listval=="1")
{
pb.set_orientation(C1.Web.UI.Orientation.vertical);
}
else
{
pb.set_orientation(C1.Web.UI.Orientation.horizontal);
}
}
</script>
This code checks for the value of the selected
drop-down list item and then sets the C1ProgressBar
control’s Orientation property to that value.
4. Add Value=”50” to the <c1:C1ProgressBar> tag so that the progress bar will appear half-full at run time.
5. Press F5 to run the program.
6. From the drop-down list, select Vertical. Observe that the progress bar changes orientations.
|
