JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<div id="listView"></div>
<div id="pager" class="k-pager-wrap"></div>
    
<script type="text/x-kendo-tmpl" id="template">
    <div class="product-view">
        <dl>
            <dt>Product Name</dt>
            <dd>${ProductName}</dd>
            <dt>Unit Price</dt>
            <dd>${kendo.toString(UnitPrice, "c")}</dd>
            <dt>Units In Stock</dt>
            <dd><input class="editorUnitsInStock" type="number" value="${UnitsInStock}" /></dd>
            <dt>Discontinued</dt>
            <dd>${Discontinued}</dd>
        </dl>
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>
        </div>
    </div>
</script>

CSS

.product-view
{
    float: left;
    width: 320px;
    margin: 5px;
    padding: 3px;
    -moz-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
    border-top: 1px solid rgba(0,0,0,0.1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.product-view dl
{
    margin: 10px 0;
    padding: 0;
    min-width: 0;
}
.product-view dt, dd
{
    float: left;
    margin: 0;
    padding: 0;
    height: 30px;
    line-height: 30px;
}
.product-view dt
{
    clear: left;
    padding: 0 5px 0 15px;
    text-align: right;
    opacity: 0.6;
    width: 100px;
}
.k-listview
{
    border: 0;
    padding: 0;
    min-width: 0;
}
.k-listview:after, .product-view dl:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.edit-buttons
{
    text-align: right;
    padding: 5px;
    min-width: 100px;
    border-top: 1px solid rgba(0,0,0,0.1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.k-toolbar, #listView, .k-pager-wrap
{
    width: 660px;
    margin: 0 auto;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;s
}
#listView
{
    width: 674px;
}
span.k-invalid-msg
{
    position: absolute;
    margin-left: 160px;
    margin-top: -26px;
}

JavaScript

var crudServiceBaseUrl = "http://demos.kendoui.com/service",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/Products",
                dataType: "jsonp"
            },
            update: {
                url: crudServiceBaseUrl + "/Products/Update",
                dataType: "jsonp"
            },
            destroy: {
                url: crudServiceBaseUrl + "/Products/Destroy",
                dataType: "jsonp"
            },
            create: {
                url: crudServiceBaseUrl + "/Products/Create",
                dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        batch: true,
        pageSize: 4,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: "ProductName",
                    UnitPrice: { type: "number" },
                    Discontinued: { type: "boolean" },
                    UnitsInStock: { type: "number" }
                }
            }
        }
    });


$("#pager").kendoPager({
    dataSource: dataSource
});

var listView = $("#listView").kendoListView({
    dataSource: dataSource,
    template: kendo.template($("#template").html())
}).data("kendoListView");

$("#listView").on("change", "input.editorUnitsInStock", function(e) {
    var uid = $(e.target).parents(".product-view").data("uid"),
        dataItem = listView.dataSource.getByUid(uid);
    
    dataItem.set("UnitsInStock", this.value);
});