JSFiddle - React, Tailwind, and code Playground

by gyoshev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://localhost/kendo/deploy/kendoui.web-dataviz.commercial/js/kendo.all.min.js"></script>
<ul id="treeview">
    <li data-expanded="true"><input type="checkbox" />Foo
        <ul>
            <li><input type="checkbox" />Bar</li>
        </ul>
    </li>
    <li><input type="checkbox" />Baz</li>
</ul>

<button class="k-button">Get checked nodes</button>

CSS

body {
    font: 12px/1.5 Tahoma,sans-serif;
}

#treeview input[type=checkbox] {
    margin-right: 4px;
}

JavaScript

function getCheckedNodesText(tree) {
    var items = Array.prototype.slice.call(tree.find(":checked").parent());
    return $.map(items, function(x) {
        return $(x).text();
    });
}

$(document).ready(function() {
    var tree = $("#treeview").kendoTreeView();
    
    $(".k-button").click(function() {
        var result = getCheckedNodesText(tree);
        console.log(result);
        $(document.body).append("<p>Checked nodes: " + result + "</p>");
    });
});