JSFiddle - React, Tailwind, and code Playground

by siliconsoul

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/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
    <div class="configuration-horizontal">
        <div class="config-section">
            <span class="configHead">Update a record</span>
            <div data-role="listview"
                 data-edit-template="edit-template"
                 data-template="template"
                 data-bind="source: products,
                            visible: isVisible,
                            events: {
                              save: onSave
                            }"
                 style="width: 320px; height: 200px; overflow: auto"></div>
        </div>
        <div>
            <button data-bind="click: addProduct">Add</button>
        </div>
    </div>
    <script type="text/x-kendo-tmpl" id="template">
        <div class="product-view k-widget">
            <div class="edit-buttons">
                <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
                <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
            </div>
            <dl>
                <dt>Product Name</dt>
                <dd>#:ProductName#</dd>
                <dt>Unit Price</dt>
                <dd>#:kendo.toString(UnitPrice, "c")#</dd>
                <dt>Units In Stock</dt>
                <dd>#:UnitsInStock#</dd>
                <dt>Discontinued</dt>
                <dd>#:Discontinued#</dd>
            </dl>
        </div>
    </script>

    <script type="text/x-kendo-tmpl" id="edit-template">
        <div class="product-view k-widget">
            <div...

CSS

.product-view
        {
            float: left;
            position: relative;
            width: 301px;
            margin: -1px -1px 0 0;
        }
        .product-view dl
        {
            margin: 10px 0;
            padding: 0;
            min-width: 0;
        }
        .product-view dt, dd
        {
            float: left;
            margin: 0;
            padding: 3px;
            height: 26px;
            width: 160px;
            line-height: 26px;
            overflow: hidden;
        }
        .product-view dt
        {
            clear: left;
            padding: 3px 5px 3px 0;
            text-align: right;
            opacity: 0.6;
            width: 100px;
        }
        .product-view .k-textbox {
            width: auto;
        }
        .edit-buttons
        {
            position: absolute;
            top: 0;
            right: 0;
            width: 26px;
            height: 146px;
            padding: 2px 2px 0 3px;
            background-color: rgba(0,0,0,0.1);
        }
        .edit-buttons .k-button
        {
            width: 26px;
            margin-bottom: 1px;
        }
        .k-pager-wrap
        {
            border-top: 0;
        }
        span.k-invalid-msg
        {
            position: absolute;
            margin-left: 6px;
        }

JavaScript

var id = 1;
var viewModel = kendo.observable({
    isVisible: true,
    onSave: function(e) {
        //kendoConsole.log("event :: save(" + kendo.stringify(e.model, null, 4) + ")");
    },
    addProduct: function(){
        var dataSource = this.get("products");
        dataSource.add({          
          ProductName: "Test",
          UnitPrice: 5,
          UnitsInStock: 20,
          Discontinued: false
        });
        dataSource.sync();
    },
    products: new kendo.data.DataSource({
        transport: {
            read: function(options) {
                options.success([]);
            },
            create: function(options) {
                var item = options.data;
                item.ID = id++;
                options.success(item);
            },
            update: function(options) {
                options.success();
            }
        },
        schema: {
            model: {
                id: "ID"            
            }
        }
        
    })
});
  
kendo.bind($("#example"), viewModel);