JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="folderView">
    <input data-bind="value: foo" />
    <button data-bind="events:{ click: read }">Read</button>
    <div>
        <div id="folders"
            data-template="exp-template" 
            data-bind="source: data">
        </div>
    </div>
</div>

<script id="exp-template" type="text/x-kendo-template">
    <div class="expbase exp${Type}" 
    id="exp${Type}${UID}" 
    data-bind="attr: { data-id:UID, data-type:Type },events: { click: select, dblclick: open }">
        <a>
            <p>
                <span>
                    <strong data-bind="text: Title,attr: { data-id: UID, data-type: Type }" class="rename"></strong>
                </span>
                <br />
                <span data-bind="text: Description"></span>
            </p>
        </a>
    </div>
</script>

CSS

.expbase {
 border: 1px solid green;
 margin: 10px;
 padding: 10px;
 width: 150px;
 float: left;    
}

JavaScript

var explorerModel = kendo.observable({

    expList: new kendo.data.DataSource({
        data: [
            {
                "UID": 26,
                "Title": "mdu test2",
                "Description": "wearing a big hat",
                "Type": "Folder"
            },
            {
                "UID": 27,
                "Title": "mdu test 3",
                "Description": "test large items",
                "Type": "Folder"
            }
        ],
        change: function() {
            //triger the change
            explorerModel.trigger("change", { field: "data" })
        }
    }),
    data: function() {
        return this.get("expList").view();
    },
    foo: "bar",
    read: function() {
        this.expList.read(); 
    }
    
});

kendo.bind($("#folderView"), explorerModel);