Kendo UI

jQuery + Kendo UI + MockJax + Knockout

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<div id="treeview"></div>
<div id="listview"></div>

CSS

.display:hover {
    cursor: pointer;
}
.hide {
    display: none;
}

JavaScript

var item1 = new kendo.data.Node({
    foo: 'foo'
});
var item2 = new kendo.data.Node({
    foo: 'bar'
});
var item3 = new kendo.data.Node({
    foo: 'baz'
});

item1.append(item2);
item2.append(item3);

var treeview = $("#treeview").kendoTreeView({
    dataSource: [item1],
    template: [
        '<div class="display">#= item.get("foo") #</div>',
        '<div class="editor hide"></div>',
        '<div>lvl:#= item.level() #</div>'
        ].join('')
}).data('kendoTreeView');

$(document).on('click', '.display', function (event) {
  var $target = $(event.target);
    var $editor = $target.siblings('.editor');
    $editor.removeClass('hide');
    $editor.kendoNumericTextBox();
    $target.addClass('hide');
});

treeview.expand('.k-item');