JSFiddle - React, Tailwind, and code Playground
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",
"OverrideMonoCPP": 1.13662,
}, {
"ModelName": "LaserJet 4345",
"ManufacturerName": "HP",
"OverrideMonoCPP": 2.369,
}],
batch: true,
schema: {
model: {
id: "ModelID",
fields: {
ModelName: {
editable: false,
type: "string"
},
ManufacturerName: {
editable: false,
type: "string"
},
OverrideMonoCPP: {
editable: false,
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 data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
format: "n5",
decimals: 10,
spinners: false,
step: 0.001,
value: value,
min: 0,
required: true
})
.bind("blur", function (e) {
$(e.target).data('kendoNumericTextBox').value(5);
});
}
$(document).ready(function () {
$("input:radio[name=gridControl]:nth(0)").attr('checked', true);
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [{
field: "ModelName",
title: "Model",
width: "90px"
}, {
field: "ManufacturerName",
title: "Make",
width: "70px"
}, {
field: "OverrideMonoCPP",
title: "Override Mono...