How do I submit async/ajax calls to my razor page methods or do custom validations within steps of the Wizard?
Ex: I'd like to populate data in each step based on what was entered on the previous. I looked at the examples, but they don't seem to show this type of use case.
From the documentation samples, there are events shown, but it is unclear how to bind a specific completion of a step (clicking next) to a specific event function (in tag helper format).
.Events(events =>
{
events.Activate("onActivate");
events.Error("onError");
events.Done("onDone");
events.Select("onSelect");
events.Reset("onReset");
events.ContentLoad("onContentLoad");
events.FormValidateFailed("onFormValidateFailed");
})
Screen shots when using tag helper and trying to figure out how to bind to a step's events:
The events aren't tied to the steps of the wizard - they are at the wizard level:
<kendo-wizard name="wizard" on-activate="onActivate" on-select="onSelect">
<wizard-steps>
<wizard-step title="Initial step">
<wizard-step-content>
<h1>Initial step content</h1>
</wizard-step-content>
</wizard-step>
<wizard-step title="Second step">
<wizard-step-content>
<h1>Second step content</h1>
</wizard-step-content>
</wizard-step>
<wizard-step title="Final step">
<wizard-step-content>
<h1>Final step content</h1>
</wizard-step-content>
</wizard-step>
</wizard-steps>
</kendo-wizard>
<script>
function onActivate(e) {
console.log("Activated: " + e.step.options.label);
switch (e.step.options.label) {
case 'step 1':
//do what you need to here
break;
}
case 'step 2':
//do step 2 stuff here
$.ajax({ whatever });
break;
default:
}
}
function onSelect(e) {
console.log("Selected: " + e.step.options.label);
}
Then, in the event handler function - you can determine what you want to do based on which step the event was fired from - using e.step.options.label (or other properties on there). From the example located at https://demos.telerik.com/aspnet-core/wizard/events they output the title of the step in the firing of each event.