Use FloatingActionButton for Navigating RadWizard Steps and Control Next Button Visibility

Environment

Product	RadWizard for ASP.NET AJAX
Version	All

Description

I want to use a FloatingActionButton to navigate to a specific step in a RadWizard based on the step's title. The wizard has a dynamic number of steps, so I cannot rely on the index number. Additionally, I need to hide or disable the "Next" button in the wizard and then show or enable it from the code-behind.

This KB article also answers the following questions:

• How can I navigate between wizard steps using custom controls?
• How do I control the visibility of the RadWizard Next button?
• Is it possible to activate a specific RadWizard step using JavaScript?

Solution

Jump to a Specific Wizard Step Using FloatingActionButton

To navigate to a specific RadWizard step using a FloatingActionButton based on the step's title, follow these steps:

1. Add the RadWizard and RadFloatingActionButton to your page.
2. Implement a JavaScript function that iterates through the wizard steps, finds the desired step by title, and sets it as active.

ASP.NET

<telerik:RadWizard runat="server" ID="RadWizard1">
    <WizardSteps>
        <telerik:RadWizardStep ID="WizardStep1" StepType="Start" Title="Step1">
            Step 1
        </telerik:RadWizardStep>
        <telerik:RadWizardStep ID="WizardStep2" Title="Step2">
            Step 2
        </telerik:RadWizardStep>
        <telerik:RadWizardStep ID="WizardStep3" Title="Step3">
            Step 3
        </telerik:RadWizardStep>
        <telerik:RadWizardStep ID="WizardStep4" StepType="Finish" Title="Step4">
            Finish step
        </telerik:RadWizardStep>
    </WizardSteps>
</telerik:RadWizard>

<telerik:RadFloatingActionButton runat="server" ID="SurveyAction" Icon="cog" Skin="Bootstrap" PositionMode="Absolute" Align="BottomEnd">
    <Items>
        <telerik:FloatingActionButtonItem Label="Jump to Page" OnClientClicked="FunctionToJump" Title="Jump to step 2" CssClass="text-bg-success" />
    </Items>
</telerik:RadFloatingActionButton>

<telerik:RadButton runat="server" ID="RadButton2" Text="Disable next button" AutoPostBack="false" OnClientClicked="onClientClicked" /> <br />
<telerik:RadButton runat="server" ID="RadButton1" Text="Enable from server" AutoPostBack="true" OnClick="RadButton1_Click" />

JavaScript

function onClientClicked(sender, args) {
    let wizard = $find("<%= RadWizard1.ClientID %>");
    let nextButton = wizard.get_nextButtonElement();

    nextButton.disabled = true;

    // If you wannt to hide it:
    // nextButton.style.display = "none"
}

function FunctionToJump(sender, args) {
    let wizard = $find("<%= RadWizard1.ClientID %>");
    let steps = wizard.get_wizardSteps();

    steps._data.forEach((step) => {
        let title = step.get_title();

        if (title === "Step3") {
            step.set_active(true);
        }
    })
}

C#

protected void RadButton1_Click(object sender, EventArgs e)
{
    string script = @"
        function f() {
            let wizard = $find('" + RadWizard1.ClientID + @"');
            let nextButton = wizard.get_nextButtonElement();
            
            nextButton.disabled = false;
            Sys.Application.remove_load(f);
        }
        Sys.Application.add_load(f);
    ";

    ScriptManager.RegisterStartupScript(this, this.GetType(), "enableButtonScript", script, true);
}

See Also

• RadWizard Documentation
• RadFloatingActionButton Documentation
• JavaScript API Reference for RadWizard