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

function add(i, again) {
	var node = [];
    var j = 0;
	for (var j = 0; j < 10; j++) {
		var id = i.toString() + j.toString();
		var items = {};
		items['text'] = 'test ' + id;
		items['id'] = id;
		items['Checked'] = false;
		if(again) items['items'] = add(i+j+1000, false);
		
		node.push(items);
		count++;
	}
	return node;
}

function omg(data, i) {
	if (i == 10) return;

	var node = add(i, true);
	data[0]["items"] = node;
	return omg(data[0]["items"], i + 1);
}

var count = 0;
var dataTree = add(1, true);
omg(dataTree, 2);

console.log(count); //990

var inline = new kendo.data.HierarchicalDataSource({
    data: dataTree
});

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