$("#diagram").kendoDiagram({
    shapes:[
      {
        id:"1",
        content:{
          text: "State 1"
        },
        x: 20,
        y: 20
      },
      {
        id:"2",
        content: {
          text: "State 2"
        },
        x: 300,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2",
        content: {
            text: "Step 1"
        },
        stroke: {
            color: "#33ccff"
        }
      }
    ]
  });

    <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",
                    contentUrl: "../content/web/wizard/ajax/ajaxContent2.html",
                }, {
                    title: "Agenda",
                    buttons: ["previous", "next"],
                    contentUrl: "../content/web/wizard/ajax/ajaxContent3.html",
                }, {
                    title: "Finalize",
                    buttons: ["previous", "done"],
                    contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
                },
            ],
            done: function (e) {
                e.preventDefault();
                var form = $('#attendeeDetails').getKendoForm();
                var talkDDLValue = $("#talk").data("kendoDropDownList").value();
                var workshopDDLValue = $("#workshop").data("kendoDropDownList").value();

                if (!form.validate()) {
                    e.sender.stepper.steps()[1].setValid(false);
                    kendo.alert("Please complete registration form");
                    e.sender.select(1);
                } else if (talkDDLValue == "" || workshopDDLValue == "") {
                    e.sender.stepper.steps()[1].setValid(true);
                    e.sender.stepper.steps()[2].setValid(false);
                    kendo.alert("Please select the talk and workshop you want to subscribe for");
                    e.sender.select(2);
                }
                else {
                    if (e.sender.stepper.steps()[1].options.error) {
                        e.sender.stepper.steps()[1].setValid(true);
                        e.sender.stepper.steps()[2].setValid(true);
                    }

                    kendo.alert("Thank you for registering! Registration details will be sent to your email.");
                }
            },
            select: function (e) {
                if (e.step.options.index == 3) {
                    updateSelection(e);
                }
            },
            contentLoad: function (e) {
                if (e.step.options.index == 3) {
                    updateSelection(e);
                }
            },
            reset: function () {
                var form = $('#attendeeDetails').getKendoForm();

                if (form) {
                    form.clear();
                }
            }
        });

        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: 250px;
            justify-content: center;
            align-items: center;
        }
    </style>
</div>

$("#wizard").kendoWizard({
        loadOnDemand: true,
        reloadOnSelect: false,
        steps: [
            {
                title: "Upload",
                icon: "upload",
                successIcon: "check",
                buttons: ["next"],
                contentUrl: "./step1.html"
            }, {
                title: "Settings",
                icon: "gear",
                successIcon: "check",
                contentUrl: "./step2.html"
            }, {
                title: "Check All",
                icon: "preview",
                successIcon: "check",
                buttons: ["previous", "next"],
                contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
            }, {
                title: "Save",
                icon: "save",
                successIcon: "check",
                buttons: ["previous", "done"],
                contentUrl: "../content/web/wizard/ajax/ajaxContent4.html"
            },
        ],
        done: function (e) {
            e.preventDefault();
            var form = $("form").getKendoForm();
            var zxy = $("#title").val();

            console.log(zxy);

            if (e.sender.stepper.steps()[1].options.error) {
                e.sender.stepper.steps()[1].setValid(true);
                e.sender.stepper.steps()[2].setValid(true);
            }

            kendo.alert("Thank you for registering!");

        },

        reset: function () {
            var form = $("form").getKendoForm();

            if (form) {
                form.clear();
            }
        }
    });

<inputname="files"id="files"type="file"/>

$("#files").kendoUpload({
        async: {
            chunkSize: 11000,// bytes
            saveUrl: "https://demos.telerik.com/kendo-ui/upload/chunksave",
            removeUrl: "https://demos.telerik.com/kendo-ui/upload/remove",
            autoUpload: true
        },
        validation: {
            allowedExtensions: [".jpg", ".jpeg", ".png", ".bmp", ".gif"]
        },
        success: onSuccess,
        showFileList: true,
    });
    function onSuccess(e) {
        if (e.operation == "upload") {
            for (var i = 0; i < e.files.length; i++) {
                var file = e.files[i].rawFile;
                if (file) {
                    var reader = new FileReader();
                    reader.onloadend = function () {
                        $("<div class='product'><img src=" + this.result + " /></div>").appendTo($("#products"));
                    };
                    reader.readAsDataURL(file);
                }
            }
        }
    }

<form>

<div class="wrapper">

 
<div id="products"></div>
</div>

<input type="text" id="title" name="title" class="k-textbox" />
</form>