JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<div id="view" class="k-block" style="width: 600px; margin-top: 35px;">
    <div class="k-block k-info-colored">
        <strong>Note: </strong>Please fill out all of the fields in this form.
    </div>
    <div>
        <dl>
            <dt>
                <label for="productName">Product Name:</label></dt>
            <dd>
                <span class="k-textbox k-space-right">
                    <input id="productName" type="text" data-bind="value: ProductName" />
                    <a href="#" data-field="ProductName" data-bind="click: clear" class="k-icon k-i-close">&nbsp;</a>
                </span>
            </dd>
            <dt>
                <label for="quanityPerUnit">Quanity Per Unit:</label></dt>
            <dd>
                <span class="k-textbox k-space-right">
                    <input id="quanityPerUnit" type="text" data-bind="value: QuantityPerUnit" />
                    <a href="#" data-field="QuanityPerUnit" data-bind="click: clear" class="k-icon k-i-close">&nbsp;</a>
                </span>
            </dd>
            <dt>
                <label for="unitPrice">Unit Price:</label></dt>
            <dd>
                <span class="k-textbox k-space-right">
                    <input id="unitPrice" type="text" data-bind="value: UnitPrice" />
                    <a href="#" data-field="UnitPrice" data-bind="click: clear" class="k-icon k-i-close">&nbsp;</a>
                </span>
            </dd>
            <dt>
                <label for="unitPrice">Unit In Stock:</label></dt>
            <dd>
                <span class="k-textbox k-space-right">
                    <input id="unitsInStock" type="text" data-bind="value: UnitsInStock" />
                  ...

JavaScript

var baseUrl = "http://longle.azurewebsites.net/odata/Product";

var productModel = kendo.data.Model.define({
    id: "ProductID",
    fields: {
        ProductID: { type: "number", editable: false, nullable: true },
        ProductName: { type: "string", validation: { required: true} },
        UnitPrice: { type: "number", validation: { required: true, min: 1} },
        Discontinued: { type: "boolean" },
        UnitsInStock: { type: "number", validation: { min: 0, required: true} }
    }
});

var productModelExtended = productModel.extend({
    saveProduct: function (s) {
        s.preventDefault();
        alert("sync");
    },
    cancel: function (s) {
        s.preventDefault();
        window.location.href = '#/list';
        
    },
    clear: function (s) {
        s.preventDefault();
        this.set($(s.target).data("field"), null);
    }
});

var product = new productModelExtended();
product.set("ProductName", "Test");
product.set("UnitPrice", 10);

kendo.bind($("#view"), product);