JSFiddle - React, Tailwind, and code Playground

by trentballew

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<h2>Table layout:</h2>
<div id="treeview" class="layout-container"></div>
<h2>Absolute positioning:</h2>
<div id="treeview2"></div>
<script id="treeview-template" type="text/kendo-ui-template">
    <div class="layout-row">
        <div class="layout-cell">#: item.text #</div>
        <div class="layout-cell">#: item.dept #</div>
        <div class="layout-cell">#: item.owner #</div>
    </div>
 </script>
<br />

<script id="treeview-template2" type="text/kendo-ui-template">
    <div class="layout-row">
        <div class="layout-cell">#: item.text #</div>
        <div class="layout-1">#: item.dept #</div>
        <div class="layout-2">#: item.owner #</div>
    </div>
 </script>

CSS

.layout-container {
    display: table;
}
.layout-row {
    display: table-row;
}
.layout-cell {
    display: table-cell;
    padding-left: 10px;
}

.layout-1 {
    position: absolute;
    padding-left: 80px;
}
.layout-2 {
    position: absolute;
    padding-left: 180px;

}

JavaScript

var treeview;
var treeview2;
var ds = new kendo.data.HierarchicalDataSource({
    data: [
        { id: 1, text: "Item 1", dept: "", owner: "", expanded: true, items: [
        { id: 2, text: "Item 2", dept: "Benefits", owner: "Bob"}, 
        { id: 3, text: "Item 3", dept: "Loans", owner: "Suzy", expanded: true, items: [
            { id: 4, text: "Item 4", dept: "Accounting", owner: "John" },
            { id: 5, text: "LongItem 5", dept: "Marketing", owner: "Alice" }
        ]},
        { id: 6, text: "LongItem 6", dept: "Loans", Owner: "Andy" }
        ]
    }]
});

treeview = $("#treeview").kendoTreeView({
    dataSource: ds,
    template: kendo.template($("#treeview-template").html()),
    dragAndDrop: true,

}).data("kendoTreeView");

treeview2 = $("#treeview2").kendoTreeView({
    dataSource: ds,
    template: kendo.template($("#treeview-template2").html()),
    dragAndDrop: true,

}).data("kendoTreeView");