New to Kendo UI for jQuery? Start a free 30-day trial

Skip disabled Step in the Wizard

Environment

Product	Progress® Kendo UI® Wizard for jQuery
Product Version	2020.2.617
Operating System	Windows 10 64bit
Preferred Language	JavaScript

In the Wizard I have attached a handler to the select event and it triggers just fine unless the next Step is disabled. The way I read the event description is that the select event should be triggered regardless, and that you can use the event to stop the select.

Solution

The Wizard is designed to enable disabled steps on valid user input. Therefore its default behavior is the select event to be prevented when the following Step is disabled. To skip the disabled Step:

Handle the click event of the 'Next' button.
Get the current step with the activeStep method
Check which is the next list item step that doesn't have the class "k-step-disabled" and get its index
Select the next enabled step by passing the index to the widget's select method

    <div id="example">
      <div class="demo-section k-content wide" style="width:600px">
        <form id="wizard" style="width:550px; margin: 0 auto;" novalidate></form>
      </div>
    </div>
    <script>
      $('#wizard').kendoWizard({
        pager: true,
        steps: [
          {
            title: "Step 1",
            buttons: ["next"],
            form: {
              orientation: "vertical",
              formData: {
              },
              items: [
                {
                  field: 'Test',
                  label: 'Test:'
                }
              ]
            }
          },
          {
            title: "Step 2",
            buttons: ["next"],
            form: {
              orientation: "vertical",
              formData: {
              },
              items: [
                {
                  field: 'Test',
                  label: 'Test:'
                }
              ]
            }
          },
          {
            title: "Step 3 Disabled",
            enabled: false,
            buttons: ["next"],
            form: {
              orientation: "vertical",
              formData: {
              },
              items: [
                {
                  field: 'Test',
                  label: 'Test:'
                }
              ]
            }
          },
          {
            title: "Step 4",
            buttons: ["next"],
            form: {
              orientation: "vertical",
              formData: {
              },
              items: [
                {
                  field: 'Test',
                  label: 'Test:'
                }
              ]
            }
          }
        ],
        select: function(e) {console.log(e)}
      });

      $(".k-wizard-buttons-right .k-primary").click(function(e) {
        var wizard = $("#wizard").data("kendoWizard");
        var currStep = wizard.activeStep();
        var idx = currStep.options.index;
        var nextValidIdx = wizard.element.find("li:eq(" + idx + ")").nextAll(".k-step:not(.k-step-disabled)").index();
        wizard.select(nextValidIdx);
         });
    </script>

Skip disabled Step in the Wizard

Environment

Description

Solution

See Also