Asp.Net core Stepper - Select event not triggered when page loads

[Janine]

I have this stepper that I am forcing the selection to index 2. 

-- this is the script part

$(document).ready(function () {
        var stepper = $("#meetingSessionStepper").data("kendoStepper");
        stepper.select(2);
        
    });

function onSelectStep(e) {

       ----- This is not triggered when the page loads
       
    }

 

--- this is the control

 @(Html.Kendo().Stepper()
            .Name("meetingSessionStepper")
            .Linear(false)
            .Orientation(StepperOrientationType.Horizontal)
            .Steps(s =>
            {
                s.Add().Label("Preparation");
                s.Add().Label("Start Lesson");
                s.Add().Label("Attendance");
                s.Add().Label("Session Notes");
                s.Add().Label("End Lesson");
            })
            .Events(events => events.Select("onSelectStep"))
    )

But for some reason, my event method onSelectStep is not being triggered when the page loads. This method though is triggered when manually clicking the step from the stepper control.

 

[Anton Mironov]

Hello, Janine,

Thank you for the provided code.

Programmatically selecting a Kendo UI Stepper causes the visual changes only. The event is not automatically triggered because this selection differs from the user's manual selection. What I can recommend is to trigger the select event manually:

$(document).ready(function () {
        var stepper = $("#meetingSessionStepper").data("kendoStepper");
        stepper.select(2);
        stepper.trigger('select', { node: 2 });

    });

Let me know if I can assist you any further.

 

Best Regards,
Anton Mironov
Progress Telerik