JSFiddle - React, Tailwind, and code Playground

by regisbsb

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<div id="tree" />
<script id="template" type="text/kendo-ui-template">
    #=item.text # 
    <ul class="menu k-rtl">
        <li>
            <span>Menu</span>
            <ul class="k-column-menu k-menu">
                <li>
                    Do it
                </li> 
                <li> 
                    Do it again 
                </li>      
            </ul>
        </li>
    </ul>
</script>

JavaScript

var tree = $('#tree');
tree.kendoTreeView({
    dataSource: new kendo.data.HierarchicalDataSource({
        data: [{
            text: "Furniture",
            items: [{
                text: "Tables & Chairs"
            }, {
                text: "Sofas"
            }, {
                text: "Occasional Furniture"
            }]
        }, {
            text: "Decor",
            items: [{
                text: "Bed Linen"
            }, {
                text: "Curtains & Blinds"
            }, {
                text: "Carpets"
            }]
        }]
    }),
    template: $('#template').html(),
    select: function (e) {
        console.log(e.node);
        //error here when you click on the menu
        // e.node is the menuitem instead of treeitem.
        console.log($(e.node).attr('role'));
        var dataItem = e.sender.dataItem(e.node);
        console.log(dataItem);
    },
    dataBound: function () {
        tree.find('.menu').kendoMenu();
    }
});