JSFiddle - React, Tailwind, and code Playground

by lelong37

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 product = new productModel();
product.set("ProductName", "Test");
product.set("UnitPrice", 10);

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