JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<div id="tree" style="height:100%"></div>

JavaScript

var inline = new kendo.data.HierarchicalDataSource({
    data: [{
        "text": "root",
            "id": "1",
            "Checked": false,
            "items": [{
            "text": "child_node",
                "id": "11",
                "Checked": false,
                "items": [{
                "text": "child_node_1",
                    "id": "111",
                    "Checked": true,
                    "items": [{
                    "text": "child_node_1_1",
                        "id": "1111",
                        "Checked": true
                }]
            }, {
                "text": "child_node_2",
                    "id": "12",
                    "Checked": false
            }, ]
        }]
    }]
});

$("#tree").kendoTreeView({
    checkboxes: {
        checkChildren: true,
        template: "<input type='checkbox' name='checkedNodes'  #= item.Checked ? 'checked' : '' # value='#= item.id #' />"
    },
    dataSource: inline,
    loadOnDemand: false    
});