JSFiddle - React, Tailwind, and code Playground

HTML

<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">
<script src="http://cdn.kendostatic.com/2012.3.1114/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.03, "DefaultColorCPP":0.07, "OverrideMonoCPP":0.03, "OverrideColorCPP":0.07},
        {"ModelName":"LaserJet 4345", "ManufacturerName":"HP", "DefaultMonoCPP":0.03, "DefaultColorCPP":0.07, "OverrideMonoCPP":0.03, "OverrideColorCPP":0.07},
        {"ModelName":"Nuvera 120", "ManufacturerName":"Xerox", "DefaultMonoCPP":0.05, "DefaultColorCPP":0.09, "OverrideMonoCPP":0.05, "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"}
            }
        }
    }
});

function extendedDecimalNumeric(container, options){
    var value = options.model[options.field];
    if(!options.model[options.field]) {
        var defaultFieldName = options.field.replace("Override","Default");
        options.model[options.field] = options.model[defaultFieldName];
        value = options.model[defaultFieldName];
    }
    $('<input required="required" name="' + options.field + '" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoNumericTextBox({format:"n",decimals:10, spinners: false, step:0.001, value: value, min: 0, required:true});
  
   ...