JSFiddle - React, Tailwind, and code Playground

by stevescotthome

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id="example">
    <div>
        <button data-bind="click: addProduct" class="k-button">Add New</button>
    </div>
    
    <ul data-template="input-template" data-bind="source: products">
    </ul>
    <ul>
        <li>
            <button data-bind="click: saveToString" class="k-button">Prepare To Save</button>
        </li>
        <li>
            <button data-bind="click: restoreFromString" class="k-button">Restore On Load</button>
        </li>
    </ul>
    
    <div id="previewpane">
        
    </div>
</div>


<script id="input-template" type="text/x-kendo-template">
    <li>
        <input type="text" data-bind="value: data"  class="k-textbox" />
        <button data-bind="click: deleteProduct"  class="k-button">Delete</button>
    </li>
</script>

CSS

.demo-section {
            width: 600px;
            min-height: 200px;
        }
        .metrotable > tbody > tr > td  {
            font-size: 12px;
        }
        .metrotable > thead > tr > th {
            font-size: 14px;
            padding-top: 0;
        }
        
        .metrotable > tfoot > tr > td {
            padding-right: 10px;
        }
        
        #example .configuration {
            margin-bottom: 10px;
            width: 190px;
        }

        .configuration label {
            display: block;
            float: none;
        }

        .configuration .name {
            margin-top: -3px;
            width: 130px;
        }
        .code-sample {
            clear: right;
        }

#previewpane{
  margin-top: 20px;
  padding: 10px;
    border: 1px solid #666;
}

JavaScript

$(document).ready(function() {
        var viewModel = kendo.observable({
            productName: "Product name",
            addProduct: function() {
                this.get("products").push({
                    data: this.get("productName")
                });
            },
            deleteProduct: function(e) {
                // the current data item (product) is passed as the "data" field of the event argument
                var product = e.data;

                var products = this.get("products");

                var index = products.indexOf(product);

                // remove the product by using the splice method
                products.splice(index, 1);
            },
            saveToString: function(e){
                var data = JSON.stringify(this.get("products"));
                $("#previewpane").html(data);
            },
            restoreFromString: function(e){
                var jsonString = $("#previewpane").html();
                var json = JSON.parse(jsonString);
                this.set("products", json);
            },
            products: [
                { data: "Hampton Sofa" },
                { data: "Perry Sofa" },
                { data: "Donovan Sofa" },
                { data: "Markus Sofa"}
            ]
        });

        kendo.bind($("#example"), viewModel);
    });