Create TextBox - In Code (JQuery) - Declaritive

by LeeMellinger

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<div id="mainForm"</div>

JavaScript

$(document).ready (function () {
   
    addTextBox('#mainForm','fld3','fld3','datepicker');
    
    kendo.init($('fld3'));
    
    
    // addBaseBox('#mainForm','fld1','fld1').kendoDatePicker();
    // $('#fld1').val('fld1');
    addLineBreak('#mainForm');
    addLineBreak('#mainForm');
   
    // addTextBox('#mainForm','fld2');
    // $('#fld2').val('fld2');
    addLineBreak('#mainForm');
    addLineBreak('#mainForm');
    
   
});

function addLineBreak(target) {
    $(target).append('<br>');
}

function textBox(target) {
    $(target).addClass('k-textbox');
}

function addTextBox(target, id, name, dataRole) {
    
    if (name == null) {
        name = id;
    }
    
    $(target).append(strSub("<input id='{0}' name='{1}' class='k-textbox' data-role='{2}'/>",id, name, dataRole));
}

function addBaseBox(target, id, name) {
    
    if (name == null) {
        name = id;
    }
    
    $(target).append(strSub("<input id='{0}' name='{1}' />",id, name));
    
    return $('#' + id);
    
}

function addDateBox(target, id, name) {
    
    if (name == null) {
        name = id;
    }
    
    $(target).append(strSub("<input id='{0}' name='{1}' />",id, name));
    $('#' + id).kendoDatePicker();

}
        
function strSub(theText, param1, param2, param3, param4){ 

    var newText = theText; 

    newText = newText.replace("{0}", param1); 
    newText = newText.replace("{1}", param2); 
    newText = newText.replace("{2}", param3); 
    newText = newText.replace("{3}", param4); 

    return newText;
}

/*
Substitute placeholders with string values:
@param {String} str The string containing the placeholders
@param {Array} arr The array of values to substitute
Examples:
alert(substitute("The {0} has {1}", ["eagle", "landed"]));
alert(substitute("{0} ... {1} ... {0}", ["A", "B"]));
*/
function substitute(str, arr) {
    var i, pattern, re, n = arr.length;
    for (i = 0; i < n; i++) {
        pattern = "\\{" + i + "\\}";
        re = new RegExp(pattern, "g");
      ...