Events

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

The example below demonstrates how to use the Click event that the Stepper triggers when the user clicks on a tool.

    @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>

    @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)