JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<button>Get selected item</button>
<div id="treeview" class="demo-section" style="width: 200px"></div>
<div id="log"></div>
CSS
button {
margin-bottom:2em;
}
#log {
margin-top: 3em;
}
JavaScript
var tv;
$(function () {
tv = $("#treeview").kendoTreeView({
dataSource: [{
Name: "Furniture",
expanded: true,
items: [{
Name: "Tables & Chairs",
Id: 1
}, {
Name: "Sofas",
Id: 99
}, {
Name: "Occasional Furniture",
Id: 3
}]
}, {
Name: "Decor",
items: [{
Name: "Bed Linen",
Id: 4
}, {
Name: "Curtains & Blinds",
Id: 5
}, {
Name: "Carpets",
Id: 6
}]
}, {
Name: "Storage",
Id: 7
}],
dataTextField: "Name",
dataValueField: "Id"
}).data('kendoTreeView');
//tv.select(tv.findByName('Sofas'));
$('button').click(function () {
var selected = tv.select(),
item = tv.dataItem(selected);
if (item) {
$('#log').text('Selected item: ' + item.Name + ' : ' + item.Id + ' (uid: ' + item.uid + ')');
} else {
$('#log').text('Nothing selected');
}
});
});