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" />
    <div>
        <div id="folders"
            data-template="exp-template" 
            data-bind="source: expList">
        </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: [
        {
            "UID": 26,
            "Title": "mdu test2",
            "Description": "wearing a big hat",
            "Type": "Folder"
        },
        {
            "UID": 27,
            "Title": "mdu test 3",
            "Description": "test large items",
            "Type": "Folder"
        }
    ],
    foo: "bar"
    
});

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