JSFiddle - React, Tailwind, and code Playground

by jeanoob

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.1114/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": false
                        }
                    ]
                },
                {
                    "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
});