jube-fork/Jube.App/wwwroot/kendo/examples/wizard/events.html

<!DOCTYPE html>
<html>
<head>
    <title>Events</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="demo-section k-content wide">
        <div id="wizard"></div>
    </div>

    <script>
        $("#wizard").kendoWizard({
            loadOnDemand: true,
            reloadOnSelect: false,
            steps: [
                {
                    title: "Welcome",
                    buttons: ["next"],
                    contentUrl: "../content/web/wizard/ajax/ajaxContent1.html"
                }, {
                    title: "Attendee Details",
                    buttons: ["previous", "next"],
                    form: {
                        formData: {
                            FirstName: "",
                            LastName: "",
                            Email: "",
                            Company:""
                        },
                        layout: "grid",
                        grid: {
                            cols: 2,
                            gutter: 20
                        },
                        items: [
                            { field: "FirstName", label: "First Name:", validation: { required: true } },
                            { field: "LastName", label: "Last Name:", validation: { required: true } },
                            { field: "Email", label: "Email:", validation: { required: true, email: true } },
                            { field: "Company", label: "Company:", validation: { optional: true } }
                        ]
                    }
                }, {
                    title: "Agenda",
                    buttons: ["previous", "next"],
                    contentUrl: "../content/web/wizard/ajax/ajaxContent3.html",
                }, {
                    title: "Finish",
                    buttons: ["previous", "done"],
                    contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
                },
            ],
            activate: onActivate,
            contentLoad: onContentLoad,
            done: onDone,
            error: onError,
            reset: onReset,
            select: onSelect,
            formValidateFailed: onFormValidateFailed,
        });

        function onActivate(e) {
            kendoConsole.log("Activate :: " + e.step.options.title);
        }

        function onContentLoad(e) {
            kendoConsole.log("ContentLoad :: " + e.step.options.title);

            if (e.step.options.index == 3) {
                    updateSelection(e);
                }
        }

        function onDone(e) {
            e.originalEvent.preventDefault();
            kendoConsole.log("Done");
        }

        function onError(e) {
            kendoConsole.error("Error :: Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
        }

        function onReset(e) {
            kendoConsole.log("Reset");
        }

        function onSelect(e) {
            kendoConsole.log("Select :: " + e.step.options.title);

            if (e.step.options.index == 3) {
                    updateSelection(e);
                }
        }

        function onFormValidateFailed(e) {
            kendoConsole.log("Validation error on ::" + e.step.options.title);
        }

        function updateSelection(e) {
            var selectedTalk = e.sender.wrapper.find('#talk').getKendoDropDownList().dataItem();
            var selectedWorkshop = e.sender.wrapper.find('#workshop').getKendoDropDownList().dataItem();
            $('#selectedTalk').html(selectedTalk.id === '' ? '' : selectedTalk.title);
            $('#selectedWorkshop').html(selectedWorkshop.id === '' ? '' : selectedWorkshop.title);
        }
    </script>

    <style>
        .wizardContainer {
            display: flex;
            height: 200px;
            justify-content: center;
            align-items: center;
        }
    </style>
</div>


    
</body>
</html>