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="ChecksID"></div>
<input id="input" type='text' data-bind='value: checkName'></input>

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"
    }]
}, {
    id: "policies",
    policies: [{
        policyName: "Default dummy policy",
        policyId: "1",
        policyChecks: [
        1,
        2]
    }, {
        policyName: "Default dummy policy II",
        policyId: "2",
        policyChecks: [
        3,
        2,
        1]
    }]
});
//// TEMPORARY DATASOURCE
var tmpPoliciesDataSource = new kendo.data.DataSource({
    data: $.extend(data, {}),
    schema: {
        data: "checks",
        model: {
            id: "checkId"
        }
    }
});

// Dropdown with the available checks
$('#ChecksID').kendoDropDownList({
    dataSource: tmpPoliciesDataSource,
    dataTextField: "checkName",
    dataValueField: "checkId",
    index: 0,
    height: 105,
    animation: {
        open: {
            effects: "fadeIn",
            duration: 100,
            show: true
        },
        close: {
            effects: "fadeOut",
            duration: 250,
            hide: true,
            show: false
        }
    }
});

kendo.bind("input", data.checks[0]);

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