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

<!DOCTYPE html>
<html>
<head>
    <title>Content position</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 class="configurator">
    <div class="header">Configurator</div>
    <div class="box-col">
        <h4>Content position Settings</h4>
        <label for="contnentPosition">Position:</label>
        <input id="contnentPosition" name="contnentPosition" />
    </div>
</div>
<div id="example">
    <div class="demo-section k-content wide" style="width: 700px;">
        <div id="validation-success"></div>
        <form id="wizard" style="width: 500px; margin: 0 auto;" novalidate></form>
    </div>

    <script>
        $(document).ready(function () {
            $("#contnentPosition").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                value: "bottom",
                dataSource: [
                    { text: "Bottom", value: "bottom" },
                    { text: "Right", value: "right" },
                    { text: "Left", value: "left" }],
                change: onChange
            });

            function onChange(e) {
                e.preventDefault();
                initWizard();
            };

            var initWizard = function () {
                if ($("#wizard").data("kendoWizard")) {
                    $("#wizard").data("kendoWizard").destroy();
                    $("#wizard").empty();
                    $("#wizard").removeClass();
                }

                var contentPosition = $("#contnentPosition").data("kendoDropDownList").value();

                $("#wizard").kendoWizard({
                    done: function (e) {
                        e.originalEvent.preventDefault();
                        kendo.alert("Thank you for registering! Registration details will be sent to your email");
                    },
                    contentPosition: contentPosition,
                    steps: [
                        {
                            title: "User data",
                            form: {
                                orientation: "vertical",
                                formData: {
                                    FirstName: "John",
                                    LastName: "Doe",
                                },
                                items: [
                                    { field: "FirstName", title: "String", label: "First Name:", validation: { required: true } },
                                    { field: "LastName", title: "String", label: "Last Name:", validation: { required: true } }]
                            },
                            buttons: ["next"]
                        },
                        {
                            title: "Login data",
                            form: {
                                orientation: "vertical",
                                formData: {
                                    Username: "johny",
                                    Email: "[email protected]",
                                    Password: "pass123",
                                },
                                items: [
                                    { field: "Username", label: "Username:", validation: { required: true } },
                                    { field: "Email", label: "Email:", validation: { required: true, email: true } },
                                    { field: "Password", label: "Password:", validation: { required: true }, hint: "Hint: enter alphanumeric characters only.", attributes: { type: "password" } },
                                ]
                            },
                            buttons: ["previous", "next"]
                        },
                        {
                            title: "Register",
                            content: '<h3>Click on the "Register" button to complete your registration.</h3>',
                            buttons: [
                                "previous",
                                { name: "done", text: "Register" }
                            ]
                        },
                    ]
                });
            };

            initWizard();
        })
    </script>

</div>


    
</body>
</html>