JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="tree" style="height:100%">
</div>

JavaScript

var inline = new kendo.data.HierarchicalDataSource({
    data: [{
        "text": "root",
        "id": "1",
        "items": [{
            "text": "child_node",
            "id": "11",
            "items": [
                {
                   "text": "child_node_1",
                    "id": "1111",
                    "items": [
                        {
                            "text": "child_node_1_1",
                            "id": "1111"
                        }
                    ]
                },
                {
                    "text": "child_node_2",
                    "id": "12"
                },
            ]
        }]
    }]
});

function onSelectNode(node) {
    var treeview = $("#tree").data("kendoTreeView");
}

$("#tree").kendoTreeView({
    dataSource: inline,
    select: function(e) {
        onSelectNode(e.node);
    }
});


var id_node_to_select = 11;
var treeview = $("#tree").data("kendoTreeView");
var item = treeview.dataSource.get(id_node_to_select);
if (item !== undefined) {
    var node = treeview.findByUid(item.uid);
    treeview.select(node);
    onSelectNode(node);
} else {
    alert('node ' + id_node_to_select + ' not found via get!');
}