display next,Previous and finish button in all radwizard steps

[Hello]

hi,
i want to display next,Previous and finish button in all radwizard steps .in step 0 (first step) previous button disabled and in last step next button disabled and finish button must be enabled. Is this possible in rad WIzard UI

  <telerik:RadWizard RenderMode="Lightweight"
                    runat="server"
                    ID="ManualOrderWizard"
                  
                    DisplayProgressBar="False"
                    DisplayCancelButton="True"
                    DisplayNavigationBar="False"
                    Skin="Office2007"
                    OnNextButtonClick="ManualOrderWizard_NextButtonClick"
                    Localization-Finish="Create Order" Localization-Cancel="Close" OnCancelButtonClick="ManualOrderWizard_CancelButtonClick">
                    <%-- OnCancelButtonClick="">--%>
                     
                    <WizardSteps>
                        <telerik:RadWizardStep ID="AddMembership" StepType="Step" runat="server">
                            <uc:UCAddMembership runat="server" ID="UCAddMembership" />
                        </telerik:RadWizardStep>
                        <telerik:RadWizardStep ID="AddItems" StepType="Step" runat="server">
                            <uc:UCAddItems runat="server" ID="AddItem" />
                        </telerik:RadWizardStep>
                        <telerik:RadWizardStep ID="CustomerShipping" StepType="Step" runat="server">
                            <%--<uc:UCAddMembership runat="server" ID="UCAddMembership2" />--%>
                        </telerik:RadWizardStep>
                        <telerik:RadWizardStep ID="GiftMessages" StepType="Step" runat="server">
                           <%-- <uc:UCAddMembership runat="server" ID="UCAddMembership3" />--%>
                        </telerik:RadWizardStep>
                        <telerik:RadWizardStep ID="AddbilltoCustomer" StepType="Step" runat="server">
                            <%--<uc:UCAddMembership runat="server" ID="UCAddMembership4" />--%>
                        </telerik:RadWizardStep>
                        <telerik:RadWizardStep ID="ReviewOrderTotal" StepType="Step" runat="server">
                            <%--<uc:UCAddMembership runat="server" ID="UCAddMembership5" />--%>
                        </telerik:RadWizardStep>
                        <telerik:RadWizardStep ID="OrderPayments" StepType="Step" runat="server">
                           <%-- <uc:UCAddMembership runat="server" ID="UCAddMembership6" />--%>
                        </telerik:RadWizardStep>
                        <telerik:RadWizardStep ID="AddNotes" StepType="Step" runat="server">
                           <%-- <uc:UCAddMembership runat="server" ID="UCAddMembership7" />--%>
                        </telerik:RadWizardStep>
                        <telerik:RadWizardStep ID="ReviewOrder" StepType="Finish" runat="server">
                            <%--uc:UCAddMembership runat="server" ID="UCAddMembership8" />--%>
                        </telerik:RadWizardStep>
                    </WizardSteps>

                </telerik:RadWizard>

[Peter Milchev]

Hello,

One approach is to change the style of the hidden items and in the OnClientLoad event of the Wizard to check the active index and disable the desired buttons: 

<style>
    .rwzNav .rwzHidden {
        display: table-cell !important;
    }

    .rwzButton:disabled {
        opacity: .5;
        cursor: default;
    }
</style>

<script>
    function OnClientLoad(sender, args) {
        var steps = sender.get_wizardSteps();
        if (sender.get_activeIndex() == 0) {
            // disable previous
            $telerik.$(sender.get_previousButtonElement()).attr("disabled", "disabled");
        }
        if (sender.get_activeIndex() == steps.get_count() - 1) {
            // disable next
            $telerik.$(sender.get_nextButtonElement()).attr("disabled", "disabled");
        }
    }
</script>

<telerik:RadWizard RenderMode="Lightweight"  runat="server"  ID="ManualOrderWizard"
    OnClientLoad="OnClientLoad" ...>

Regards,
Peter Milchev
Progress Telerik

[Anoosh]

The solution above does not show how to show the Finish button in a specific intermediary step.  I'd like to show the finish button in step 1 for example.  Something like:  

.rwzButton:enabled {
        opacity: 1.0;
        cursor: default;
    }

function OnClientLoad(sender, args) {
            var steps = sender.get_wizardSteps();
            if (sender.get_activeIndex() == 1) {
                $telerik.$(sender.get_finishButtonElement()).attr("enabled", "enabled");
            }

}

However, this turns on the Finish on every step and when I click in an intermediary step, it does not OnFinishButtonClick.  Any suggestions appreciated.

[Peter Milchev]

Hello Anoosh,

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