Kendo TreeView Issue

by Jason Carter

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script id="treeTemplate" type="text/x-kendo-template">
    <span>
        #: item.name #
        # if (!item.hasChilren) { #
            <input type = 'text' data-bind = "value: treeData[#: item.parentIndex #].items[#: item.childIndex #].displayValue"/> 
        # } #
    </span>
</script>

<div id="content">
    <div id="form">
        <label>Item Name:
            <input type="text" data-bind="value: form.itemName" />
        </label>
        <button data-bind="click: form.onAddItem">Add Item</button>
        <div class="console">
            <h2>Output:</h2>
            <div id="myConsole"/>
        </div>
    </div>
    <h2>TreeView</h2>
    <div data-template="treeTemplate" data-role="treeview" data-bind="source: treeData" />
</div>

CSS

.console {
    display: inline-block;
    float: right;
    min-width: 300px;
    min-height: 800px;
    border: 1px solid red;
}

JavaScript

(function ($) {
    var viewModel = kendo.observable({
        itemIndex: 0,
        form: {
            itemName: '',
            onAddItem: function (e) {
                e.preventDefault();

                var itemToAdd = {
                    name: viewModel.get('form.itemName'),
                    hasChilren: true,
                    items: (function () {
                        var children = [];
                        for (var i = 0; i < 3; i++) {
                            children.push({
                                name: viewModel.get('form.itemName') + '-child-' + i,
                                parentIndex: viewModel.get('itemIndex'),
                                childIndex: i,
                                displayValue: '',
                                hasChilren: false
                            });
                        }
                        return children;
                    })()
                }

                if (viewModel.get('treeData')) {
                    viewModel.get('treeData').push(itemToAdd);
                } else {
                    viewModel.set('treeData', kendo.observableHierarchy([itemToAdd]));
                }

                viewModel.set('form.itemName', '');
                viewModel.set('itemIndex', viewModel.get('itemIndex') + 1);
            }
        }
    });

    $(document).ready(function () {
        kendo.bind(document.body, viewModel);
        viewModel.bind('change', function (e) {
            console.log('viewModel changed!');
            var output = JSON.stringify(viewModel, undefined, 2);
            console.log('----------------------------------------------------');
            console.log(output);
            console.log('----------------------------------------------------');
            $("#myConsole").html("<pre>" + output + "</pre>");
        });
    });
})(jQuery);