JSFiddle - React, Tailwind, and code Playground

by Chris O'Brien

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div><a id="append" href="#">append</a></div>
<div><a id="show" href="#">show</a></div>
<div id="treeview"></div>
<div id="content"></div>

JavaScript

var cnt = 0;
var data = [
    {
    "id": cnt++,
    "text": "node_" + cnt}
];
var tree = $("#treeview").kendoTreeView({
    dataSource: kendo.observableHierarchy(data)
}).data("kendoTreeView");

$("#append").click(function() {
    var pos = tree.select();
    tree.append({
        id: cnt++,
        text: "node_" + cnt
    }, pos);
});

$("#show").click(function() {
    var data = tree.dataItem(".k-item:first");
    $("#content").html(JSON.stringify(data, null, 2));
});