I am building a wizard using tag helpers and I have a few questions.
1. How can I set the class on the step buttons?
2. I want to do some manual validation on the next button. I have the click event hooked up and the validation is working but I can't prevent the wizard from moving to the next step.
3. I want my final step to not have any buttons. Is this possible?
4. How do I disable clicking on the step number to move through the wizard?
4 Answers, 1 is accepted
Hello James,
1. The Wizard API does not provide an options to set a class to the step buttons. You can, however, set a class to the whole step container
<wizard-step title="Start" class-name="myClass">
</wizard-step>
2. You can handle the select event in order to achieve this. The event is fired when the user clicks on Previous/Next buttons and when the user clicks on the built-in stepper to navigate to a step. The event data provides information on the button instance, the selected step and the stepper step clicked. Check the client-side select event API for further details
<kendo-wizard name="wizard" on-select="onSelect">
</kendo-wizard>
<script>
function onSelect(e){
//custom logic
}
</script>
select:function(e){
if(e.step.options.index == 2){
$("div.k-wizard-buttons").hide();
}
},
Here is a dojo demonstrating the above.
4. Do I understand correctly that you want only the next/previous step to be selectable? If that is the case you can set the Stepper linear configuration to true:
<kendo-wizard name="wizard">
<stepper linear="true"/>
</kendo-wizard>
I hope this helps.
Regards,
Aleksandar
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Thanks. The answer for #4 doesn't seem to work. However, clicking on the numbers does cause the validation to happen when it is setup in the on-select event handler, so it isn't the end of the world.

Hello James,
I am stepping in for my colleague Aleksandar, who's taking a day off.
It is possible that I am missing something, but on the screenshot you attached I see a gray box around the step content, not a blue one. It comes from the tabindex set to the step container and indicates that the focus is on the step content. Without the box there will be no indication where the focus is. Still, if you don't want the box to appear, you can remove the tabindex attribute from the content wrapping element:
$(document).ready(function () {
$(".k-wizard-step").removeAttr("tabindex");
})
Regards,
Ivan Danchev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.