JSFiddle - React, Tailwind, and code Playground

by korchev

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>

JavaScript

$("#tree").kendoTreeView({
    select: function(e) {
        var breadcrumb = [];
        var treeView = this;

        $(e.node)
            .parents("li")
            .andSelf()
            .each(function() {
                var nodeText = $.trim(treeView.text(this));
                breadcrumb.push(nodeText);
            });

        breadcrumb = breadcrumb.join(" > ");

        $("#breadcrumb").text(breadcrumb);                        
    }
});