JSFiddle - React, Tailwind, and code Playground

by rusev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="grid"></div>

JavaScript

var data = [{
    ID: 1,    
    ListPrice: { 
        value: 1
    }
}];

var url = "/echo/json/",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: url,
                dataType: "json",
                type: "POST",
                data: {
                    json: JSON.stringify(data)
                }
            },
            update: {
                url: url ,
                dataType: "json",
                type: "POST",
                data: function(data) {
                    return { json: JSON.stringify(data) }
                }
            }
        },
        batch: true,
        pageSize: 30,
        schema: {
            model: {
                id: "ID",
                fields: {
                    ListPrice: { editable: true }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,        
        columns: [{
            field: 'ListPrice', 
            title: 'List Price', 
            template: '#= ListPrice.Value #' 
        }],
        editable: true
    });