Unplanned
Last Updated: 02 Aug 2021 12:58 by ADMIN
Created by: Mauro
Comments: 0
Category: Wizard
Type: Feature Request
4
Hello.
I wanted to know how I can modify the WizardStepper template?

Basically I want to customize the WizardStepper in a similar way to when it is customized in the Stepper component (https://docs.telerik.com/blazor-ui/components/stepper/step-template).

Since the WizardStepper is actually a Stepper, I suppose this is possible. The point is that I have not managed to do it. I'd tried WizardStepperSettings but only two properties can be configured from here (StepType and Linear).  

Thanks.

Mauro
Unplanned
Last Updated: 19 Jul 2021 10:24 by ADMIN
Created by: Andre
Comments: 1
Category: Wizard
Type: Feature Request
4

 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 showcase this I put the conditional step in the middle.

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>

<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; }

    int CurrStepIndex { get; set; }

    void ToggleStep()
    {
        // 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;
    }
}

---