JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<div id="divContainer">
    <input type="radio" name="gridControl" value="true">Edit</input>
    <br/>
    <input type="radio" name="gridControl" value="false">View</input>
    <br/>
    <div id="grid"></div>
</div>

JavaScript

var dataSource = new kendo.data.DataSource({
    data: [{
        "ModelName": "Unknown",
        "ManufacturerName": "Unknown",
        "DefaultMonoCPP": 0.03312,
        "DefaultColorCPP": 0.07325,
        "OverrideMonoCPP": 0.03,
        "OverrideColorCPP": 0.07
    }, {
        "ModelName": "LaserJet 4345",
        "ManufacturerName": "HP",
        "DefaultMonoCPP": 0.03,
        "DefaultColorCPP": 0.07456,
        "OverrideMonoCPP": 0.0387,
        "OverrideColorCPP": 0.07
    }, {
        "ModelName": "Nuvera 120",
        "ManufacturerName": "Xerox",
        "DefaultMonoCPP": 0.05,
        "DefaultColorCPP": 0.64659,
        "OverrideMonoCPP": 0.74505,
        "OverrideColorCPP": 0.09
    }, {
        "ModelName": "i3030",
        "ManufacturerName": "Canon",
        "DefaultMonoCPP": 0.03,
        "DefaultColorCPP": 0.07,
        "OverrideMonoCPP": 0.03,
        "OverrideColorCPP": 0.07
    }, {
        "ModelName": "Aficio SP",
        "ManufacturerName": "Ricoh",
        "DefaultMonoCPP": 0.05,
        "DefaultColorCPP": 0.09,
        "OverrideMonoCPP": 0.05,
        "OverrideColorCPP": 0.09
    }],
    batch: true,
    schema: {
        model: {
            id: "ModelID",
            fields: {
                ModelName: {
                    editable: false,
                    type: "string"
                },
                ManufacturerName: {
                    editable: false,
                    type: "string"
                },
                DefaultMonoCPP: {
                    editable: false,
                    type: "number"
                },
                DefaultColorCPP: {
                    editable: false,
                    type: "number"
                },
                OverrideMonoCPP: {
                    editable: true,
                    type: "number"
                },
                OverrideColorCPP: {
                    editable: true,
                    type: "number"
                }
            }
        }
 ...