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

Skip disabled Step in the Wizard | Kendo UI for jQuery

Environment

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

Description

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:

  1. Handle the click event of the 'Next' button.
  2. Get the current step with the activeStep method
  3. Check which is the next list item step that doesn't have the class "k-step-disabled" and get its index
  4. 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>

See Also

In this article
Not finding the help you need? Improve this article