display next,Previous and finish button in all radwizard steps

2 posts, 0 answers
  1. Hello
    Hello avatar
    1 posts
    Member since:
    May 2018

    Posted 18 Jul Link to this post

    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>

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    409 posts

    Posted 23 Jul Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top