Adding Navigation URLs to RadStepper Steps
Environment
Product | RadStepper for ASP.NET AJAX |
Version | 2024.4.1114 |
Description
In scenarios where clicking a step in the RadStepper control should navigate the user to a specific URL, it's necessary to handle the step selection client-side and perform the navigation using JavaScript. The RadStepper does not have a built-in property to set a navigation URL directly.
This knowledge base article also answers the following questions:
- How can I navigate to a URL when a RadStepper step is clicked?
- Is it possible to assign a navigation URL to steps in the RadStepper control?
- Can I use JavaScript to handle step selection in RadStepper for navigation purposes?
Solution
To achieve navigation from RadStepper steps, follow these steps:
-
Handle the OnClientStepSelected Event: Utilize the OnClientStepSelected event to detect when a step is selected by the user.
-
Implement JavaScript for Navigation: Within the event handler, use JavaScript to navigate to the URL associated with the selected step.
Sample Implementation
<telerik:RadStepper runat="server" ID="RadStepper1">
<ClientEvents OnStepSelected="onStepSelected" />
<Steps>
<telerik:StepperStep Label="Step 1" />
<telerik:StepperStep Label="Step 2" />
<telerik:StepperStep Label="Step 3" />
</Steps>
</telerik:RadStepper>
<script type="text/javascript">
function onStepSelected(sender, args) {
var stepIndex = args.get_step().getIndex();
// Define URLs for each step
var urls = [
"http://example.com/step1",
"http://example.com/step2",
"http://example.com/step3"
];
// Navigate to the URL corresponding to the selected step
window.location.href = urls[stepIndex];
}
</script>
Explanation:
OnClientStepSelected
: This event triggers when a user selects a step, providing an opportunity to execute custom JavaScript code.args.get_step().getIndex()
: This method retrieves the index of the selected step, which is used to identify the correct URL from theurls
array.URLs Array
: An array that holds the URLs for each step. The navigation occurs based on the array index matching the step index.
Using this approach, you can easily add navigation functionality to the RadStepper steps without the need for server-side processing.