In this topic, you will write a client-side script that will allow users to change the fill direction 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="changeFillDirection(this.value)" name="fillDirectionChange">
<option selected="selected" value="0">FromLeftOrTop</option>
<option value="1">FromRightOrBottom</option>
</select>
3. This markup creates a drop-down list with two options: FromLeftOrTop and FromRightOrBottom. Each option has been assigned a value, which you will use later to determine the user's input.
Notice that the onchange property of the drop-down list has been set to "changeFillDirection(this.value)". changeFillDirection 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 changeFillDirection function.
4. Place the following JavaScript after the <body> tag:
<script type="text/javascript">
function changeFillDirection(val)
{
var pb = Sys.Application.findComponent("<%=C1ProgressBar1.ClientID%>");
if(val=="1")
{
pb.set_fillDirection(C1.Web.UI.Controls.C1ProgressBar.ProgressBarFillDirection.fromRightOrBottom);
}
else
{
pb.set_fillDirection(C1.Web.UI.Controls.C1ProgressBar.ProgressBarFillDirection.fromLeftOrTop);
}
}
</script>
This code checks for the value of the selected drop-down list item and then sets the C1ProgressBar control's FillDirection property to that value.
5. Add Value="50" to the <c1:C1ProgressBar> tag so that the progress bar will appear half-full at run time.
6. Press F5 to run the program.
7. From the drop-down list, select FromRightOrBottom. Observe that the progress bar's status indicator fills from the right.
|
