Skipping diabled Steps in Wizard doasn't work

[Timo]

I have a Telerik Window with an Telerik Wizard as its content.

I've implemented 7 steps. In the first step I have an Radiogroup. Depending of the groups value i disable step 2 and 3 and if I click "Next"-Button I want to skip them and jump to step 4.

Here are some code snippets:

 

OnChange event of the RadioGroup in step 1:

function onChangeCancelType(radioGrp) { 

        var $j = jQuery.noConflict(); 
        var wizard = $j("#CancelWizard").data("kendoWizard"); 

        if (radioGrp.newValue === '1') { 
            wizard.enableStep(1, true); 
            wizard.enableStep(2, true); 
        } else { 
            wizard.enableStep(1, false); 
            wizard.enableStep(2, false); 
        } 
    } 

 

OnClick event of Next-button:

function onClickStep1(e) { 
        e.preventDefault(); 
        var $j = jQuery.noConflict(); 
        var wizard = $j("#CancelWizard").data("kendoWizard"); 
        var radioGrp = $j("#CancelType").data("kendoRadioGroup"); 

        if (radioGrp.value() === '2') { 
            wizard.select(3); 
        } else {
            wizard.select(1);
        }
    } 

 

What happens is, that in case of selecting Radiogroup value 2 the wizard jumps to step 5 instead of step 4.

I'm sure there is something stupid I oversee here.

Thank's for help

Timo

[Mihaela]

Hello Timo,

Thank you for the provided code snippets.

I would recommend preventing the default action of the select event of the Wizar when skipping to Step 4:

 

    $(document).ready(function () {
        var btnStep1 = $("#CancelWizard-0 .k-wizard-buttons-right button").last();
        $(btnStep1).on("click", function (e) { //handling the "click" event of the "Next" button on Step 1
            e.preventDefault();
            var wizard = $("#CancelWizard").data("kendoWizard");
            var radioGrp = $("#CancelType").data("kendoRadioGroup");

            if (radioGrp.value() === '2') {
                wizard.one("select", function (e) {
                    e.preventDefault();
                });
                wizard.select(3);
            }
        });
    });

 

Here is a REPL example for your reference: https://netcorerepl.telerik.com/GmunGele139E6aSo50

Please give this example a try and let me know if it works as expected at your end.

 

Regards, Mihaela Progress Telerik

[Timo]

Hi Mihaela,

your Example works very well, thank's a lot.

Is there a way to disable the links in the stepper? Currently i can step back from step 4 to 3 by clicking the checked step 3 regardless of which option in step 1 is choosen.

Regards,

Timo

[Mihaela]

Hi Timo, 

By design, the disabled steps cannot be selected through the stepper. Having this in mind, you could disable steps 2 and 3 initially (in the Wizard configuration) and enable them when the correct option is selected on Step 1.

@(Html.Kendo().Wizard()
  .Name("wizard")
  .Steps(s =>
  {
    ...
    s.Add().Title("Step 2").Enabled(false)
    s.Add().Title("Step 3").Enabled(false)
    ...
  })
)

Here is the updated REPL example: https://netcorerepl.telerik.com/mwkSOJlR17ZaazuM21