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 2018 Link to this post

    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"
                        Localization-Finish="Create Order" Localization-Cancel="Close" OnCancelButtonClick="ManualOrderWizard_CancelButtonClick">
                        <%-- OnCancelButtonClick="">--%>
                            <telerik:RadWizardStep ID="AddMembership" StepType="Step" runat="server">
                                <uc:UCAddMembership runat="server" ID="UCAddMembership" />
                            <telerik:RadWizardStep ID="AddItems" StepType="Step" runat="server">
                                <uc:UCAddItems runat="server" ID="AddItem" />
                            <telerik:RadWizardStep ID="CustomerShipping" StepType="Step" runat="server">
                                <%--<uc:UCAddMembership runat="server" ID="UCAddMembership2" />--%>
                            <telerik:RadWizardStep ID="GiftMessages" StepType="Step" runat="server">
                               <%-- <uc:UCAddMembership runat="server" ID="UCAddMembership3" />--%>
                            <telerik:RadWizardStep ID="AddbilltoCustomer" StepType="Step" runat="server">
                                <%--<uc:UCAddMembership runat="server" ID="UCAddMembership4" />--%>
                            <telerik:RadWizardStep ID="ReviewOrderTotal" StepType="Step" runat="server">
                                <%--<uc:UCAddMembership runat="server" ID="UCAddMembership5" />--%>
                            <telerik:RadWizardStep ID="OrderPayments" StepType="Step" runat="server">
                               <%-- <uc:UCAddMembership runat="server" ID="UCAddMembership6" />--%>
                            <telerik:RadWizardStep ID="AddNotes" StepType="Step" runat="server">
                               <%-- <uc:UCAddMembership runat="server" ID="UCAddMembership7" />--%>
                            <telerik:RadWizardStep ID="ReviewOrder" StepType="Finish" runat="server">
                                <%--uc:UCAddMembership runat="server" ID="UCAddMembership8" />--%>


  2. Peter Milchev
    Peter Milchev avatar
    636 posts

    Posted 23 Jul 2018 Link to this post


    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: 

        .rwzNav .rwzHidden {
            display: table-cell !important;
        .rwzButton:disabled {
            opacity: .5;
            cursor: default;
        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");
    <telerik:RadWizard RenderMode="Lightweight"  runat="server"  ID="ManualOrderWizard"
        OnClientLoad="OnClientLoad" ...>

    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