Selection
The selection feature allows you to highlight a step based on the current progress.
The selection is changed when you click on a step in the UI, or set the SelectedItem or SelectedIndex properties of RadStepProgressBar. By default this will highlight also the steps that are previous to the selected step.
<telerik:RadStepProgressBar SelectedIndex="1">
<telerik:RadStepProgressBarItem Content="Step 1" />
<telerik:RadStepProgressBarItem Content="Step 2" />
<telerik:RadStepProgressBarItem Content="Step 3" />
</telerik:RadStepProgressBar>
StepProgressBar selection
Selecting a step will update the OverallProgress property of RadStepProgressBar which can be used to get the numeric progress value. The OverallProgress ranges between 0 and 100.
Selected Item Status
The RadStepProgressBarItem has three states that can enter - NotStarted, Indeterminate and Completed. When you click onto a step item to select it, its status changes to Completed. The same status is applied to the previous steps. The different states display a different indicator inside the step shape.
Step item statuses
To change the status that is applied to the selected item from Complete to another value - like NotStarted or Indeterminate - set the SelectedItemStatus property of RadStepProgressBar.
<telerik:RadStepProgressBar SelectedItemStatus="Indeterminate" />
Selected item status set to Indeterminate
To prevent changing the status of the previous steps to Complete, set the CompleteAllPreviousStepsOnSelection property of RadStepProgressBar to False.
<telerik:RadStepProgressBar CompleteAllPreviousStepsOnSelection="False">
Disabled previous steps auto completion
The current state of a RadStepProgressBarItem can be got via its Status property.
Prevent User Selection
To prevent changing the selection whenever a step item is clicked, set the CanUserSelect property of RadStepProgressBar to False.
<telerik:RadStepProgressBar CanUserSelect="False" />
Progress Animation Duration
The step selection change reflects to the OverallProgress property of the control which fills the track visual with color. The color fill is done using an animation, that runs for 1 second by default. The animation duration can be changed with the AnimationDuration property of RadStepProgressBar. The property value represents the duration in seconds.
<telerik:RadStepProgressBar AnimationDuration="3">
To disable the animation, you can set the AnimationDuration to 0.