Display Finish on an Intermediate Page

[Anoosh]

Hi,

My wizard has 7 steps but after step 2, all other steps are optional.  Rather than having the user click Next 6 more times, I'd like to show the Finish button on Step2.  How do I go about this and How do you go about making tabs for optional steps (clickable) but not for the first 2 steps?  The closest thread I found is this: 

https://www.telerik.com/forums/display-next-previous-and-finish-button-in-all-radwizard-steps#SprpJ3GYo0Oy1IJxI8e_nw

but does not quite answer the question above.

[Peter Milchev]

Hello Anoosh,

For convenience, I am sharing the workaround solution from the linked forum thread here:

With a small overwrite of the internal functions of the RadWizard, you can achieve the desired functionality. The script from the snippet below should be loaded somewhere after the ScriptManager:

 

<script>
    Telerik.Web.UI.RadWizard.prototype.original_updateStepTypeButtons = Telerik.Web.UI.RadWizard.prototype._updateStepTypeButtons;
    Telerik.Web.UI.RadWizard.prototype._updateStepTypeButtons = function (currentWizardStep) {
        this.original_updateStepTypeButtons(currentWizardStep);
        if (currentWizardStep.get_cssClass().indexOf("has-finish-button") > -1) {
            // enable the Finish button on steps that have "has-finish-button" CssClass set
            this._toggleNavigationButton(this.get_finishButtonElement(), false);
        }
    }
</script>

<telerik:RadWizard runat="server" ID="RadWizard1" >
    <WizardSteps>
        <telerik:RadWizardStep ID="WizardStep1" StepType="Start">
            Step 1
        </telerik:RadWizardStep>
        <telerik:RadWizardStep ID="WizardStep2" >
            Step 2
        </telerik:RadWizardStep>
        <telerik:RadWizardStep CssClass="has-finish-button" ID="WizardStep3">
            Step 3 with enabled Finish button
        </telerik:RadWizardStep>
        <telerik:RadWizardStep ID="WizardStep4" StepType="Finish">
            Finish step
        </telerik:RadWizardStep>
        <telerik:RadWizardStep ID="WizardStep5" StepType="Complete">
            Completed!
        </telerik:RadWizardStep>
    </WizardSteps>
</telerik:RadWizard>

Regards,
Peter Milchev
Progress Telerik

[Anoosh]

Hi Peter, this works great. Thank you.  The only issue is that when "Finish" is pressed, flow moves to the "Complete" Step.  I need it to go to the actual finish step as I get a confirmation from user in that step.  I tried setting  e.NextStepIndex but it does not make a difference.  Any idea how I can change the as such?

 protected void RadWizard1_OnFinishButtonClick(object sender, WizardEventArgs e)
        {
            // If clicked finish in the middle, Go to confirmation at the end
            if (e.CurrentStepIndex != 6)
            {
                e.NextStepIndex = 6;  
                return;
            }

   }

[Peter Milchev]

Hello Anoosh,

The purpose of the Finish button is to go to the Complete step so the observed behavior is the expected one.

If you need to use the Finish button to go to the Finish step, then you can cancel the OnClientButtonClicking event and manually set the desired step that should activate:

function OnClientButtonClicking(sender, args) {
    // if finish button clicked from intermediate step
    if (args.get_command() == Telerik.Web.UI.WizardCommand.Finish && sender.get_activeWizardStep().get_stepType() != Telerik.Web.UI.WizardStepType.Finish) {
        // cancel default behavior of finish button click
        args.set_cancel(true);

        // set the desired active step here...
    }
}

Regards,
Peter Milchev
Progress Telerik

[Anoosh]

This worked perfectly. Thank you.