Events in Blazor Stepper Component

4 Jan 20242 minutes to read

This section describes the Stepper events that will be triggered when an appropriate actions are performed. The following events are available in the Stepper control.

Created

The Stepper component triggers the Created event when the component rendering is completed.

@using Syncfusion.Blazor.Navigations

<SfStepper Created="Created">
    <StepperSteps>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
    </StepperSteps>
</SfStepper>

@code{
    public void Created()
    {
        // Here, you can customize your code.
    }
}

StepChanged

The Stepper component triggers the StepChanged event after the active step is changed.

@using Syncfusion.Blazor.Navigations

<SfStepper StepChanged="StepChanged">
    <StepperSteps>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
    </StepperSteps>
</SfStepper>

@code{
    public void StepChanged(StepperChangedEventArgs args)
    {
        // Here, you can customize your code.
    }
}

StepChanging

The Stepper component triggers the StepChanging event before the active step change.

@using Syncfusion.Blazor.Navigations

<SfStepper StepChanging="StepChanging">
    <StepperSteps>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
    </StepperSteps>
</SfStepper>

@code{
    public void StepChanging(StepperChangeEventArgs args)
    {
        // Here, you can customize your code.
    }
}

StepClicked

The Stepper component triggers the StepClicked event when the step is clicked.

@using Syncfusion.Blazor.Navigations

<SfStepper StepClicked="StepClicked">
    <StepperSteps>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
    </StepperSteps>
</SfStepper>

@code{
    public void StepClicked(StepperClickedEventArgs args)
    {
        // Here, you can customize your code.
    }
}

StepRendered

The Stepper component triggers the StepRendered event after rendering of the each step.

@using Syncfusion.Blazor.Navigations

<SfStepper StepRendered="StepRendered">
    <StepperSteps>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
        <StepperStep></StepperStep>
    </StepperSteps>
</SfStepper>

@code{
    public void StepRendered(StepperRenderedEventArgs args)
    {
        // Here, you can customize your code.
    }
}