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="form">
    <label>Item Name: <input type="text" data-bind="value: form.itemName"/></label>
    <button data-bind="click: form.onAddItem">Add Item</button>
</div>

<div data-template="treeTemplate" data-role="treeview" data-bind="source: treeData"/>

CSS

pre.code {
    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('parentIndex', viewModel.get('parentIndex') + 1);
            }
        }
    });
    
    $(document).ready(function() {
        kendo.bind(document.body, viewModel);
        viewModel.bind('change', function(e) {
            console.log('----------------------------------------------------');
            console.log(JSON.stringify(viewModel, undefined, 2));
            console.log('----------------------------------------------------');
        });
    });
})(jQuery);