When you try to use Wizard with only one step inside, the following error appears:

"ArgumentException: The "Max" value should be greater than 0."

If you have more than one step, everything works as expected.

----------ADMIN EDIT-----------

To avoid the exception, you can use at least two steps inside the Wizard.

Hi,

I have a page (a billing page) that has a wizard on it, the wizard contains multiple steps, and each step contains a custom component. Each component has a validation mechanism. When I open an invoice, I want to provide the user with a message to let them know if the invoice can be processed. To do this, I need to invoke the validation mechanism of all the steps, which is not possible without opening them all to have an existing instance.

Regard

Al

This issue has to do with keyboard support, where if the step index is changed programmatically, and then the user tabs back onto the wizard stepper, then the focus class is on the wrong step.  The active step is correct in the stepper, but the focus outline is on the step prior to the programmatic index change.  I have created a repl here:

https://blazorrepl.telerik.com/wcbmlAlj23ZwNsxf21

If you click the Move to 3rd Step button it will switch the wizard to the 3rd step correctly.

Tab to the stepper, and step 1 will have the outline focus class, the focus will actually be on the correct step (step 3).

Pressing the right arrow key will move to Active Step 4, but the outline focus class will be moved to step 2.  

Pressing the left arrow key will then fix the outline class.

I would expect that when changing the step index programmatically, that the outline focus class on the stepper would be displayed for the step that the index was changed to.  It becomes confusing for keyboard users.

 The disable option is still showing the step and it is not good for me. I have 35 types of transactions and all of them have generic and specific step.

---

ADMIN EDIT

Here is a potential workaround - basic conditional markup can add or remove steps. The key thing is that they will be added to the end of the wizard if they had not been rendered. To handle this, dispose and re-initialize the component, so the step will be rendered at the correct position.

If you have complex steps, you can work around this by creating a collection of descriptor models for the list of steps and create the steps based on that collection, where you can keep the VIsible flag, in a fashion similar to this example for the TabStrip.

<TelerikButton OnClick="@ToggleStep">Toggle attachments step visibility</TelerikButton>

@if (WizardVisible)
{
    <TelerikWizard @bind-Value="@CurrStepIndex" >
        <WizardSteps>
            <WizardStep Label="Personal Details" Icon="user">
                <Content>
                    content here
                </Content>
            </WizardStep>

            @if (AttachmentsStepVisible)
            {
                <WizardStep Label="Attachments" Icon="paperclip">
                    <Content>
                        conditional content here
                    </Content>
                </WizardStep>
            }

            <WizardStep Label="Confirmation" Icon="check">
                <Content>
                    other content here
                </Content>
            </WizardStep>
        </WizardSteps>
    </TelerikWizard>
}


@code {
    bool AttachmentsStepVisible { get; set; }
    bool WizardVisible { get; set; } = true;

    int CurrStepIndex { get; set; }

    async void ToggleStep()
    {
        //dispose the Wizard
        WizardVisible = false;

        // defence against hiding the step when it is the last step, which would cause an exception
        if (AttachmentsStepVisible && CurrStepIndex == 2)
        {
            CurrStepIndex = 1;
        }

        //the actual visibility toggle
        AttachmentsStepVisible = !AttachmentsStepVisible;

        //allow some time for the disposal and toggling the step visibility prior to re-initialization
        await Task.Delay(10);

        //re-initialize the Wizard
        WizardVisible = true;

        StateHasChanged();
    }
}

---

Hi

We have to muchs steps in our wizards

So it would be nice to make the stepper scrollable

Example:

10 steps

visual are 1..7 , if i'm on step 4 , step 1 dissappears and 8 will be visible etc....

Also small < > added to the stepper could be uses to moves quickly throug the steps

This would be a nice enhancement

The keyboard navigation built into the Wizard control conflicts with DatePicker. When I used the up down arrows to change the date it causes the wizard to move to the next page.

I am able to reproduce this same issue right on the demo page Blazor Wizard Demos - Overview | Telerik UI for Blazor

Steps to Reproduce.

1. Complete the required password.

2. select the date field and use the up down arrow keys.

I'm not aware of any workaround since we cannot disable keyboard navigation on the Wizard control.