!Kendo UI Dynamic dropDown Bind w/o template

replace template construct with html rewrite via jQuery and bind to datasource

by David McClelland

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">
        <div id="filterControl">target</div>
    <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# data-role=#=dataRole# id=#=label# #=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({
    assetProperties:[
    {property: "prop1"},
    {property: "prop2"},
     {property: "prop3"}],
          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 control by using the splice method
              controls.splice(index, 1);
          },
          controls: []
      });
      
      var controlBankViewModel = kendo.observable({       
          addControl: function () {              
              var controlSelector = $("#controlSelector").data("kendoDropDownList");
              controlSelection = controlSelector.select();
              console.log("controlSelection: "+controlSelection)
              
              activeControlsViewModel.controls.push({
                  name: this.controls[controlSelection].name,
                  markup: this.controls[controlSelection].markup,
                  label: this.controls[controlSelection].label,
                  cntrlFunction: this.controls[controlSelection].cntrlFunction,
                   dataRole: this.controls[controlSelection].dataRole,
                  dataBind:...