Create TextBox - In Code (JQuery)

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 () {
   
    addDateBox('#mainForm','fld1','fld1');
    addLineBreak('#mainForm');
    addLineBreak('#mainForm');
   
    addTextBox('#mainForm','fld2');
    addLineBreak('#mainForm');
    addLineBreak('#mainForm');
    
    addTextBox('#mainForm','fld3');
    addLineBreak('#mainForm');
    addLineBreak('#mainForm');
   
    addTextBox('#mainForm','fld4');
    addLineBreak('#mainForm');
    addLineBreak('#mainForm');
    
});

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

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

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");
        str = str.replace(re, arr[i]);
    }
    return str;
}
exports.substitute = substitute;

// Create textbox in 'div'.
function createTextBox(targetName, id, name) {
    
    var target = document.getElementById(targetName);
    var oFrag = document.createDocumentFragment();
    
    var...