JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css">
<script src="https://kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<div id="example">
<button class="k-button" id="selectNode">Select Node</button>
</div>
<div class="demo-section k-content">
<div id="treeview"></div>
</div>
JavaScript
$(document).ready(function() {
var toBeSelectedNodeId = 10;
var treeview = $("#treeview").kendoTreeView({
dataSource: {
data: [
{ text: "Item 1", id:1, items: [
{ text: "Item 1.1", id:2 },
{ text: "Item 1.2", id:3 },
{ text: "Item 1.3", id:4 }
] },
{ text: "Item 2", id:5, items: [
{ text: "Item 2.1", id:6 },
{ text: "Item 2.2", id:7 },
{ text: "Item 2.3", id:8 , items:[ { text: "Item 2.3.1", id:9, items:[ { text: "Item 2.3.1.1", id:10 }]}, { text: "Item 2.3.2", id:11, items:[ { text: "Item 2.3.2.1", id:12 }] }] }
] },
{ text: "Item 3", id:15 }
]
},
template: "#= item.text #<input type='hidden' value='#= item.id #' />",
dataBound:function(e){
var a=e;
debugger;
}
}).data("kendoTreeView");
var item = $("#treeview").find(".k-in").find("input[value='" + toBeSelectedNodeId + "']").parent();
// expand all parent nodes
$(item).parentsUntil('.k-treeview').filter('.k-item').each(
function (index, element) {
$("#treeview").data('kendoTreeView').expand($(this));
}
);
// get DataSourceItem by given id
var nodeDataItem = treeview.dataSource.get(toBeSelectedNodeId);
debugger;
//get node within...