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 |
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:
- Handle the click event of the 'Next' button.
- Get the current step with the
activeStepmethod - 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
selectmethod
<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>