JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<ul id="tree">
<li id="item1">Item 1
<ul>
<li></li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JavaScript
$(function() {
function appendNodes(node, subNodes, treeView) {
$.each(subNodes, function() {
$(node).find('.k-icon:first').removeClass('k-loading');
treeView.append({
text: this.Text
}, $(node));
if (this.HasChilds) {
treeView.append({
text: ""
}, $(node).find('.k-group:first').children('li:last'));
}
});
}
$('#tree').kendoTreeView({
expand: function(e) {
var treeView = $('#tree').data('kendoTreeView');
if ($(e.node).find('ul:first').find('li').length == 1 && $(e.node).find('ul:first').find('li:first').find('.k-in').text() == "") {
$(e.node).find('.k-icon:first').addClass('k-loading');
$(e.node).find('ul:first').html("");
if ($(e.node).is('#item1')) {
var nodes = [{
Text: "Item 1.1",
HasChilds: true},
{
Text: "Item 1.2",
HasChilds: true},
{
Text: "Item 1.3",
HasChilds: false},
{
Text: "Item 1.4",
HasChilds: false},
{
Text: "Item 1.5",
HasChilds: false}];
appendNodes(e.node, nodes, treeView);
} else if ($(e.node).find('.k-in:first').text() == "Item 1.1") {
var nodes = [{
Text: "Item 1.1.1",
HasChilds: true}];
appendNodes(e.node, nodes, treeView);
} else if ($(e.node).find('.k-in:first').text() == "Item 1.1.1") {
var nodes = [{Text: "Item 1.1.1.1", HasChilds: true}];
appendNodes(e.node, nodes, treeView);
...