JSFiddle - React, Tailwind, and code Playground

by egrubbs

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.metro.min.css">
<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<div id="grid"></div>
<br>
Even though the <b>code</b> column has editable set to false, it can be edited. The empty cell in the <b>name</b> column cannot be edited, although "vanilla" can be edited just fine.
<div id="grid2"></div>

JavaScript

$(document).ready(function() {
    $("#grid").kendoGrid({
        editable: true,
        navigatable: true,
        dataSource: {
            data: [
                {
                OrderID: 111,
                Freight: 2.22,
                ShipName: 'Crackers',
                flavors: [{
                    code: 'v',
                    name: 'vanilla',
                    qty: 4},
                {
                    code: 'c',
                    name: '',  // This empty field won't be editable.
                    qty: 7}  
                                                                                                                       ]}
            ],
            schema: {
                model: {
                    fields: {
                        OrderID: {
                            type: "number",
                            editable: false
                        },
                        Freight: {
                            type: "number"
                        },
                        ShipName: {
                            type: "string"
                        }
                    }
                }
            }
        },
        height: 250,
        columns: [
            "OrderID", "Freight", "ShipName"]
    });

    var grid = $('#grid').data('kendoGrid');
    var data_item = grid.dataItem(grid.tbody.find('>tr:first'));
    $("#grid2").kendoGrid({
        editable: true,
        navigatable: true,
        dataSource: {
            data: data_item.flavors,
            schema: {
                model: {
                    fields: {
                        code: {
                            type: "string",
                            editable: false  // This will be ignored.
                        },
                        name: {
                            type: "string"
                        },
                        qty: {
                            type: "number"
                        }
                   ...