JSFiddle - React, Tailwind, and code Playground

by gyoshev

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>
<div id="tree">
</div>

<table id="grid">
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Alex</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Barney</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Fred</td>
    </tr>
</table>

CSS

body {
    font: 12px/1.5 Tahoma,sans-serif;
}

#tree {
    width: 20%;
    float: left;
}

#grid {
    width: 70%;
    float: left;
}

JavaScript

$("#tree").kendoTreeView({
    dataSource: [
        { text: "foo" },
        { text: "bar", expanded: true, items: [
            { text: "baz" }
          ] },
        { text: "qux" }
    ]
});

$("#grid").kendoGrid();