JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
Breadcrumb Trail: <span id="breadcrumb">Root</span>
<ul id="tree">
<li>Root
<ul>
<li>Parent 1
<ul>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
</li>
</ul>
<button class="k-button">Remove child node</button>
JavaScript
var selected;
$("#tree").kendoTreeView({
select: function(e) {
var breadcrumb = [];
var treeView = this;
//console.log(e);
$(e.node)
.parents("li")
.andSelf()
.each(function() {
var nodeText = $.trim(treeView.text(this));
selected = nodeText;
breadcrumb.push(nodeText);
});
breadcrumb = breadcrumb.join(" > ");
$("#breadcrumb").text(breadcrumb);
}
});
$('button').click(function(){
var treeview = $("#tree").data("kendoTreeView");
console.log(selected);
var itemToDelete = treeview.findByText(selected);
$("#breadcrumb").text("");
treeview.remove(itemToDelete);
});