kendo-uikendo-asp.net-core

In Kendo-UI Wizard ASP.NET Core, How do I get data from the server on click?


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: enter image description here

enter image description here


Solution

  • 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.