JSFiddle - React, Tailwind, and code Playground

by pvanhouten

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
<script src="https://rniemeyer.github.io/knockout-kendo/js/knockout-3.3.0.js"></script>
<script src="https://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<ul data-bind="kendoTreeView: tree"></ul>

<script type="text/html" id="leafTemplate">
    <span data-bind="text: console.log($data);"></span>
    <input type="checkbox" data-bind="checked: item.checked" />
    <span data-bind="text: item.text"></span>
</script>

JavaScript

var Model = function () {
    var self = this;
    
    self.tree = {
        useKOTemplates: true,
        template: "leafTemplate",
        widget: ko.observable(),
        selected: ko.observable(),
        data: ko.observableArray([
            {
                "id": ko.observable("1"),
                "text": ko.observable("Parent 1"),
                "selected": ko.observable(false),
                "checked": ko.observable(true),
                "items": ko.observableArray([
                    {
                        id: ko.observable("2"),
                        text: ko.observable("Child 1"),
                        "checked": ko.observable(false),
                        "selected": ko.observable(false)
                    }
                ])
            },
            {
                "id": ko.observable("3"),
                "text": ko.observable("Parent 2"),
                "checked": ko.observable(false),
                "selected": ko.observable(false),
                "items": ko.observableArray()
            }
        ])
    };
};
var model = new Model();


ko.kendo.bindingFactory.createBinding({
    name: "kendoTreeView",
    defaultOption: "data",
    watch: {
        data: function(value, options) {
            ko.kendo.setDataSource(this, value, options);
        }
    },
    events: {
        change: function(options, e) {
            if (ko.isWriteableObservable(options.value)) {
                var tree = e.sender;
                options.value(tree.dataItem(tree.select()));
            }
        },
        check: function (options, e) {
            var tree = e.sender;
            console.log(ko.dataFor(e.node));
            console.log(tree.dataItem(e.node));
            console.log(options);
            console.log(e);
            console.log(tree);
        }
    },
    async: true,
    templates: ["template"]
});




ko.kendo.bindingFactory.createBinding({
    name: "kendoTreeItem",
    parent: "kendoTreeView",
    watch: {
    ...