This is a migrated thread and some comments may be shown as answers.

Tag Helper Wizard

4 Answers 66 Views
Wizard
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 09 Mar 2021, 04:39 AM

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

Sort by
0
Aleksandar
Telerik team
answered on 11 Mar 2021, 04:07 PM

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

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/.

0
James
Top achievements
Rank 1
answered on 15 Mar 2021, 05:35 PM

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.

0
James
Top achievements
Rank 1
answered on 15 Mar 2021, 05:41 PM
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?
0
Ivan Danchev
Telerik team
answered on 18 Mar 2021, 04:23 PM

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.

Tags
Wizard
Asked by
James
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
James
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or