@{
    ViewData["Title"] = "Home Page";
}
<style>
    
</style>
<div class="container border border-danger py-5 mt-10">
    <div class="card card-custom border border-success">
        <div class="card-header">
            <div class="card-title">
                <label class="font-weight-bolder">Dynamic Wizard Steps</label>
            </div>
        </div>
        <div class="card-body k-body py-5">
            <div class="row">
                <div class="col-lg-12">
                    <div class="row mt-10 mb-10">
                        <label class="col-12 font-weight-bolder mb-0">Please Enter The No. of Steps:</label>
                        <div class="col-lg-3">
                            <input id="wizardStepsNo" style="width:100%;" />
                        </div>
                        <div class="col-lg-2">
                            <button class="k-button k-primary" type="button" id="stepsButton" onclick="createSteps()">Steps</button>
                        </div>
                    </div>
                    @*<div id="wizard"></div>*@
                     <form id="wizard" style="width:100%" novalidate></form>
                    @*<button class="k-button k-primary col-4" style="width:100%">Final Submit</button>*@
                </div>
                
            </div>
        </div>
    </div>
</div>
<script>
$("#wizardStepsNo").kendoTextBox();

function createSteps() {
    alert("Button Clicked");
    var valueOfTextBox=$("#wizardStepsNo").val();
    valueOfTextBox= parseInt(valueOfTextBox);
    var arrayValue = [];
    for (var i = 0; i < valueOfTextBox;i++){
        
        arrayValue[i] = {
        title:"Item",
        className:"step"+i,
        form: {

                    formData: {
                        FirstName: "",
                        LastName: "",
                        Email: "",
                        Amount:""
                    },
                    items: [
                        { field: "FirstName", label: "First Name:" },
                        { field: "LastName", label: "Last Name:" },
                        { field: "Email", label: "Email:"},
                        { field: "Amount", label: "Amount:",editor:"NumericTextBox"}
                    ],
                    //buttonsTemplate: '<bytton type="submit" class="k-button k-primary" onclick="onSubmit()">submit</button>',
          
                    
                    
                }
        //contentUrl: "D:\\Leverage\KendoDynamicWizardSteps\DynamicWizard\Views\Home\htmlpage.html"
        //contentUrl:"~/htmlpage.html"
        //content:"<h3>Some Content</h3>",
        };
        
        
    }
    console.log(arrayValue)
    //var form = ("."+$step+".k-form").getKendoForm();
    //var tmp = 'step' + i;
    //var form = $('.'+ tmp + " .k-form").getKendoForm();
    //console.log("From value", form);    

    
    //var new_input="<div id='new_"+arrayValue+"'></div>";
    //var new_input=arrayValue;
    //$("#wizard").kendoWizard({
    //    pager:true,
        
    //}).append(new_input);
    //$("#total_chq").val(arrayValue);
    console.log(Array.isArray(arrayValue));

    $("#wizard").kendoWizard({
        validateForms: false,
        //pager: true,
          done: function(e) {
                e.originalEvent.preventDefault();
                //var tmp = 'step' + ;
              //var form = $('.' + tmp + ' .k-form').getKendoForm();
              //old one
              var form = $('.step .k-form').getKendoForm();
              console.log("From value", form); 
              
            },
                    
        steps: arrayValue,
        /*select:onSelect,*/

        
    })
    
    console.log($('div .k-wizard-step').attr('id'));
    
    var idArr = [];
        $("div .k-wizard-step").each(function(){
            idArr.push($(this).attr("id"));
            
        }); 

        console.log(idArr)
    for (i = 0; i < idArr.length; i++) {
        console.log(idArr[i]);
        
    }
    //just for trail purpose
    var formData = {};    
    $('#wizard').find('input').each(function() {
    formData[this.id] = this.value;
    });

    var json = JSON.stringify({ Form: formData });

    console.log("JSON VALUE IS",json);

   
   
}


function getValues() {
    alert("clicked");
    // console.log($('div .k-wizard-step').attr('id'));
    var idArr = [];
    
    $("div .k-wizard-step").each(function() {
        idArr.push($(this).attr("id"));

    });

    console.log(idArr);
    for (i = 0; i < idArr.length; i++) {
        var wizardId = idArr[i];
        console.log(wizardId);
    }
    

   
    
     
    



    
}



</script>