Events in Blazor Stepper Component

27 Aug 20262 minutes to read

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

Created

The Blazor 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 Blazor 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 Blazor 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 Blazor 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 Blazor 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.
    }
}