JSFiddle - React, Tailwind, and code Playground

by sparksterz

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<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: [{
        "DiscountName": "Printer",
            "Hardware": 0.0,
            "Service": 0.0,
            "CorpServ": 0.0,
            "CorpAsset": 0.0,
            "Escalator": 0.0,
            "Total": 0.0
    }, {
        "DiscountName": "MFP",
            "Hardware": 0.0,
            "Service": 0.0,
            "CorpServ": 0.0,
            "CorpAsset": 0.0,
            "Escalator": 0.0,
            "Total": 0.0
    }, {
        "DiscountName": "MFC",
            "Hardware": 0.0,
            "Service": 0.0,
            "CorpServ": 0.0,
            "CorpAsset": 0.0,
            "Escalator": 0.0,
            "Total": 0.0
    }, {
        "DiscountName": "PP",
            "Hardware": 0.0,
            "Service": 0.0,
            "CorpServ": 0.0,
            "CorpAsset": 0.0,
            "Escalator": 0.0,
            "Total": 0.0
    }, {
        "DiscountName": "A4",
            "Hardware": 0.0,
            "Service": 0.0,
            "CorpServ": 0.0,
            "CorpAsset": 0.0,
            "Escalator": 0.0,
            "Total": 0.0
    }, {
        "DiscountName": "Solutions",
            "Hardware": 0.0,
            "Service": 0.0,
            "CorpServ": 0.0,
            "CorpAsset": 0.0,
            "Escalator": 0.0,
            "Total": 0.0
    }],
    batch: true,
    schema: {
        model: {
            id: "ModelID",
            fields: {
                DiscountName: {
                    editable: false,
                    type: "string"
                },
                Hardware: {
                    editable: true,
                    type: "number"
                },
                Service: {
                    editable: true,
                    type: "number"
                },
                CorpServ: {
                    editable: true,
                    type: "number"
                },
                CorpAsset: {
                    editable: true,
                    type:...