jube-fork/Jube.App/wwwroot/kendo/examples/stepper/layout.html

<!DOCTYPE html>
<html>
<head>
    <title>Layout</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="configurator">
        <div class="header">Configurator</div>
        <div class="box-col">
            <h4>Layout Settings</h4>
            <input id="layout" name="layout" />
        </div>
    </div>
    <div class="demo-section k-content wide">
        <nav id="stepper"></nav>
    </div>
    <script>
        $(document).ready(function () {
            $("#layout").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                    { text: "Label and Indicator", value: "both", label:true, indicator:true },
                    { text: "Label only", value: "label",label:true, indicator:false },
                    { text: "Indicator only", value: "indicator",label:false, indicator:true }],
                change:onChange
                    });

            var original = $("#stepper").clone(true);

            function onChange(e) {
                e.preventDefault();
                var stepper = $("#stepper"),
                    clone = original.clone(true);

                stepper.data("kendoStepper");

                stepper.replaceWith(clone);

                initStepper();
            };

            var initStepper = function () {
                var dataItem = $("#layout").data("kendoDropDownList").dataItem();
                $("#stepper").kendoStepper({
                    indicator:dataItem.indicator,
                    label: dataItem.label,
                    steps: [{
                        label: "First step"
                    }, {
                        label: "Second step",
                        selected: true
                    }, {
                        label: "Third step"
                    }, {
                        label: "Step four"
                    }, {
                        label: "Last step"
                    }]
                }).data("kendoStepper");
            };

            initStepper();
        });
    </script>
</div>

    
</body>
</html>