Nested Kendo Templates

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<div class="form">       
  <dl>
    <dt>Type</dt>
    <dd><select data-role="dropdownlist" data-bind="source: type, value: expenseType" data-text-field="name" data-value-field="value"></select></dd>
    <dt>Merchant</dt>
    <dd><input id="merchant" type="text" class='k-textbox' data-bind="value: merchant" /></dd>
    <dt>Amount</dt>
    <dd><input data-role="numerictextbox" data-bind="value: amount" id="amount" type="text" /></dd>
  </dl>
    <dt>&nbsp;</dt>
    <dd><button id="create" data-bind="click: create" class="k-button">Add</button></dd>
</div>

<div class="grid" data-role="grid" data-sortable="true" data-bind="source: expenses" data-columns='["Type", "Merchant", "Amount"]' data-scrollable="false"></div>

CSS

.form
{
    padding: 0 2em;
}

.form:after
{
    content: "";
    display: block;
    clear: both;
}

dl, dt, dd
{
    margin: 0;
    padding: 0;
}

dt, dd
{
    float: left;
    margin-top: 1em;
}

dt
{
    clear: left;
    text-align: right;
    width: 6em;
    margin-right: 2em;
    line-height: 2.4;
}

.grid {
    margin: 2em;
}

JavaScript

var viewModel = kendo.observable({

    // the expenses array will hold the grid values
    expenses: [],

    // the type array populates the drop down
    type: [{ name: "Food", value: "food"}, { name: "Clothing", value: "clothing"}, { name: "Bills", value: "bills" }],

    // the expenseType holds the currently selected value of the dropdown list
    expenseType: "food",

    // the values are bound to the merchant and amount fields
    merchant: null,
    amount: null,

    // the event executes on clicking the Add button
    create: function(e) {         
        // add the items to the array of expenses
        this.get("expenses").push({Type: this.get("expenseType"), Merchant: this.get("merchant"), Amount: this.get("amount")});

        // reset the form
        this.set("expenseType", "food");
        this.set("merchant", "");
        this.set("amount", "");
    }

});

// apply the bindings
kendo.bind(document.body.children, viewModel);