Tag Helper Wizard

[James]

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?

[Aleksandar]

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>

3. You can achieve this by handling the select event and checking if the selected step is the last one and hide the Wizard buttons.

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

[James]

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.

[James]

There's one more issue I'm seeing. The steps of my wizard have forms with radio buttons and checkboxes.  If I don't click the a checkbox, but instead click a label for a checkbox or anywhere else in the wizard I get a blue box around the step content.  How do I eliminate this?

[Ivan Danchev]

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