JSFiddle - React, Tailwind, and code Playground

by trentcioran

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.silver.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="taxonomies" ></div>

<script id="treeview-template" type="text/x-kendo-template">
    #= item.text #<input type='hidden' class='data-id' value='#= item.id #' /><input type='hidden' class='data-type' value='#= item.type #' />
</script>

JavaScript

$('#taxonomies').kendoTreeView({
    dragAndDrop: false,
    select: function(e) {
        var nodeType = $(e.node).find('.data-type').val();
        console.log('node type: ' + nodeType);
    },
    template: kendo.template($("#treeview-template").html())
});
var taxonomiesTree = $('#taxonomies').data('kendoTreeView');

var data = [{"Id":15,"Name":"New","Description":"Description","HasPic":true,"PicFormat":"Jpg","SubCategories":[{"Id":16,"Name":"New2","Description":"Description2","HasPic":true,"PicFormat":"Jpg","Parent":{"Id":15,"Name":"New","Description":"Description","HasPic":true,"PicFormat":"Jpg","Parent":null,"HasApplicationErrors":false,"HasErrors":false,"Errors":null},"HasApplicationErrors":false,"HasErrors":false,"Errors":null}],"HasApplicationErrors":false,"HasErrors":false,"Errors":null}];


var createNode = function (taxonomy) {
    var node = {
        text: taxonomy.Name,
        id: taxonomy.Id
    };
    if (!taxonomy.SubCategories || taxonomy.SubCategories.length == 0) {
        node.type = 'leaf';
    } else {
        node.type = 'node';
        node.items = [];
        for (var j = 0; j < taxonomy.SubCategories.length; j++) {
            node.items.push(createNode(taxonomy.SubCategories[j]));
        }
    }

    return node;
};

var treeData = {
    text: 'Taxonomies',
    items: []
};

for (var i = 0; i < data.length; i++) {
    treeData.items.push(createNode(data[i]));
}

taxonomiesTree.append(treeData);
taxonomiesTree.expand(".k-item");