JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<div id="tree"></div>
JavaScript
var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: '/echo/json/',
dataType: "json",
type: "POST",
data: function(options){
var result;
if(!options.id){
result = kendo.stringify([{"id":12345,
"label":"NODE 1",
"load_on_demand":true
}]);
}
else{
result = kendo.stringify([{"id":12346,
"label":"Child NODE 1",
"load_on_demand":false},
{"id":12347,
"label":"Child NODE 2",
"load_on_demand":false}]);
}
return {json: result};
}
}
},
schema: {
model: {
id: "id",
hasChildren: "load_on_demand"
}
}
});
$("#tree").kendoTreeView({
dataSource: homogeneous,
dataTextField: "label"
});