JSFiddle - React, Tailwind, and code Playground

by tomas_eklund

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<div class="container">
    <div class="header">TreeBuilder</div>
    <div class="form">
        <input type="text" id="new-item" />
        <button id="add">+</button>
        <button id="save">save</button>
    </div>
    <div id="treeview"></div>
</div>
<div class="container">
    <div class="header">Source components, drag to TreeBuilder</div>
    <div class="form">
        <input type="text" id="new-item2" />
        <button id="add2">+</button>
    </div>
    <div id="treeview2"></div>
</div>

<div class="buttons">
    <p><a href="https://www.runscope.com/capture/w1hu7l0mod2i" class="k-button" target="_blank">Inspect AJAX requests</a></p>
</div>

<script id="template" type="text/kendo-ui-template">
    #: item.FullName # <a class='delete' href='\#'>delete</a>
</script>

CSS

div.container {
    display: block;
    width: 300px;
    min-height: 200px;
    text-align: left;
    border: 1px solid #ccc;
    margin: 10px;
    float: left;
}
div.form {
    width: 280px;
    background-color: #ccc;
    padding: 5px 10px;
}
div.header {
    font-weight: bold;
    text-align: center;
    width: 280px;
    background-color: #ccc;
    padding: 5px 10px;
}
div.buttons {
    clear: both;
}
input[type=text] {
    width: 150px;
    border: 1px solid #999;
}
a.delete {
    font-size: smaller;
    color: red;
}
.k-button {
    margin: 10px;
}
#treeview, #treeview2 {
    padding-bottom: 20px;
}

JavaScript

var httpCaptureService = 'https://w1hu7l0mod2i.runscope.net';

var ds = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: 'http://mojoprint.se/test.php',
            dataType: 'jsonp'
        },
        create: {
            url: httpCaptureService,
            dataType: 'jsonp',
            data: {action: 'create'}
        },
        destroy: {
            url: httpCaptureService,
            dataType: 'jsonp',
            data: {action: 'destroy'}
        },
        update: {
            url: httpCaptureService,
            dataType: 'jsonp',
            data: {action: 'update'}
        }
    },
    schema: {
        model: {
            id: 'id',
            text: 'name'
        }
    }
});

$('#treeview').kendoTreeView({
    dragAndDrop: true,
    dataSource: ds,
    dataTextField: 'FullName',
    template: kendo.template($("#template").html())
});

$(document).on('click', '#add', function() {
    var s = $('#new-item').val();
    if (s) {
        ds.add({ FullName: s });
        $('#new-item').val('');
    }
});

$(document).on('click', '#save', function() {
    ds.sync();
});

$(document).on("click", ".delete", function(e) {
	e.preventDefault();
	var treeview = $("#treeview").data("kendoTreeView");
	treeview.remove($(this).closest(".k-item"));
});

/***************************************************/

ds2 = new kendo.data.HierarchicalDataSource({
    data: [{FullName: 'John Doe'}]
});

$('#treeview2').kendoTreeView({
    dragAndDrop: true,
    dataSource: ds2,
    dataTextField: 'FullName'
});

$(document).on('click', '#add2', function() {
    var s = $('#new-item2').val();
    if (s) {
        ds2.add({ FullName: s });
        $('#new-item2').val('');
    }
});