Kendo UI - Set parameter programmatically

Question

# var myVar = false; #
<div>
    @(Html.Kendo().Stepper()
            .Name("stepper")
            .Orientation(StepperOrientationType.Horizontal)
            .Label(true)
            .Indicator(true)
            .Steps(s =>
            {
                s.Add().Label("Step_1");
                s.Add().Label("Step_2").Selected(true);
                s.Add().Label("Step_3");
            })
        .ToClientTemplate())
</div>

The above sets Step_2 to be the selected one.

How do I set it programmatically?

e.g. s.Add().Label("Step_2").Selected(myVar);

Answer 1

You are messing languages layers. myVar is Javascript and its inside a template, Html.Kendo()... is c#, so you CAN'T mix them. You have to change it outside the template.

What I would do is something like this:

<div id="stepper-container" data-step="#= myVar #">

Then after the template was rendered, I would use Javascript to change that:

let stepperIndex = $('#stepper-container').data('step');
$('#stepper').data('kendoStepper').select(stepperIndex);