!Kendo UI Dynamic Control Bank

Use template construct to display a different control based on a variable.

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
    <div id="controlBank" class="demo-section">
    <div class="configuration k-widget k-header"> <span class="configHead">Add a Control</span>
                <div class="selector" >Select Control:
                    <select id="controlSelector" data-role="dropdownlist" data-value-field="name"
                    data-text-field="name" data-bind="source: controls"></select>
                    <button data-bind="click: addControl">Add</button>
                </div>
        </div>
    </div>       
    <div id="output">    
    <table id="controls" class="metrotable">
        <thead>
            <tr>
                <th>Label</th>
                <th>Type</th>
                <th>Function</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody data-template="row-template" data-bind="source: controls"></tbody>
    </table>
</div>
</div>
<script id="row-template" type="text/x-kendo-template">
    <tr> 
        <td data-bind = "text: name" > </td>
        <td><#= markup# #=dataBind# #=dataTextField#>#=label#</#= markup#></td > 
        <td data-bind = "text: cntrlFunction"> </td>
        <td><button class="k-button" data-bind="click: deleteControl">Delete</button > </td>
    </tr>
</script>
</div>

CSS

.demo-section {
    min-width: 600px;
    min-height: 200px;
}
#controls {
    width:300px;
}
}
.metrotable > tbody > tr > td {
    font-size: 12px;
}
.metrotable > thead > tr > th {
    font-size: 14px;
    padding-top: 0;
}
.metrotable > tfoot > tr > td {
    padding-right: 10px;
}
#example .configuration {
    margin-bottom: 10px;
    width: 480px;
    padding:20px;
}
.configuration label {
    display: block;
    float: none;
}
.configuration .options {
    padding: 12px;
    width: 130px;
}
.configuration #addButton {
    height:32px;
    width:120px: padding-top:12px;
}

JavaScript

$(document).ready(function () {
      var activeControlsViewModel = kendo.observable({
          controlName: "Control Name",
          controlType: "Control Type",
          controlFunction: "Control Function",
          addControl: function () {
              this.get("controls").push({
                  name: this.get("controlName"),
                  markup: (this.get("controlType")),
                  label: (this.get("label")),
                  cntrlFunction: (this.get("controlFunction")),
                   dataBind: (this.get("dataBind")),
                  dataTextField: (this.get("dataTextField"))
              });
          },
          deleteControl: function (e) {
              // the current data item (product) is passed as the "data" field of the event argument
              var control = e.data;

              var controls = this.get("controls");

              var index = controls.indexOf(control);

              // remove the product by using the splice method
              controls.splice(index, 1);
          },
          controls: [{
              name: "Button",
              markup: "button",
              label:"My Button",
              cntrlFunction: "button",
              dataBind : "empty",
              dataTextField : "data-text-field='name'"            
          }, {
              name: "Checkbox",
              markup: "input type='checkbox'",
              label:"My Checkbox",
              cntrlFunction: "empty",
              dataBind : "empty",
              dataTextField : "data-text-field='name'"
          }, {
              name: "Input",
              markup: "input",
              label:"My Input",
              cntrlFunction: "empty",
              dataBind : "empty",
              dataTextField : "data-text-field='name'"
          }, {
              name: "Select",
              markup: "select",
              label:"My Select",
              cntrlFunction: "empty",
              dataBind : "data-bind = 'source:...