JSFiddle - React, Tailwind, and code Playground

by antouank

HTML

<script src="http://login.teamviewer.com/Scripts/kendo/2012.3.1315-debug/kendo.all.js"></script>
<script src="http://login.teamviewer.com/Scripts/kendo/2012.3.1315-debug/kendo.common.js"></script>
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.common.css">
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.metro.css">
<div id="header">Header</div>
<div id="flexbox">
    <div class="pane" id="pane1">
        <div id="grid" style="width: 200px;"></div>
    </div>
    <div class="pane" id="pane2">pane 2</div>
    <div class="pane" id="pane3">pane 3</div>
</div>

CSS

#header {
    height: 60px;
    border: 1px dotted red;
}

#flexbox {
    border: 1px dotted black;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    width: 100%;
    min-height: 300px;
}
.pane {
    border: 1px dotted green;
}
#pane1 {
    
}
#pane2 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

JavaScript

var data = kendo.observable({
    id: "checks",
    checks: [{
        checkId: 0,
        checkName: "Disk space check"
    }, {
        checkId: 1,
        checkName: "Physical disk check"
    }, {
        checkId: 2,
        checkName: "Windows update status"
    }, {
        checkId: 3,
        checkName: "Anti-virus status"
    }]
});
//// TEMPORARY DATASOURCE
var tmpPoliciesDataSource = new kendo.data.DataSource({
    data: $.extend(data, {}),
    schema: {
        data: "checks",
        model: {
            id: "checkId"
        }
    }
});

// Dropdown with the available checks
$("#grid").kendoGrid({
  dataSource: tmpPoliciesDataSource,
  columns: [
     { field: "checkId", width: "20px" },
     { field: "checkName", width: "50px" }
   ]
});

//$('<button>').text('debug').click(function () {
//  debugger;
//.appendTo('body');