Events

You can subscribe to all client-side events and then use them to further customize the behavior of the Stepper.

The example below demonstrates how to handle the Activate and Select events that the Stepper triggers when a specified step is selected.

Razor

    @using Kendo.Mvc.UI

    @(Html.Kendo().Stepper()
        .Name("stepper")
        .Steps(s =>
        {
            s.Add().Label("First step");
            s.Add().Label("Second step");
            s.Add().Label("Third step");
            s.Add().Label("Fourth step");
            s.Add().Label("Fifth step");
        })
        .Events(events => events.Activate("onActivate").Select("onSelect"))
    )

<script>
    function onActivate(e) {
        kendoConsole.log("Activated: " + e.step.options.label);
    }

    function onSelect(e) {
        kendoConsole.log("Selected: " + e.step.options.label);
    }
</script>

Razor

    @addTagHelper *, Kendo.Mvc

    <kendo-stepper name="stepper" on-activate="onActivate" on-select="onSelect">
        <steps>
            <step label="First step">
            </step>
            <step label="Second step">
            </step>
            <step label="Third step">
            </step>
            <step label="Fourth step">
            </step>
            <step label="Fifth step">
            </step>
        </steps>
    </kendo-stepper>

<script>
    function onActivate(e) {
        kendoConsole.log("Activated: " + e.step.options.label);
    }

    function onSelect(e) {
        kendoConsole.log("Selected: " + e.step.options.label);
    }
</script>

Next Steps

• API for Configuring the Stepper Events
• Using the Stepper Events (Demo)

See Also

• Using the API of the Stepper for ASP.NET Core (Demo)