JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="practiceSection">
<div id="phoneNumber">
<h4>Phone Number</h4>
<span>Display Value:</span>
<input id="displayPhoneNumber" data-bind="value: phoneNumber.DisplayValue" readonly=true /><br/>
<span>Old Value:</span>
<input id="oldPhoneNumber" data-bind="value: phoneNumber.OldValue" readonly=true /><br/>
<span>New Value:</span>
<input id="newPhoneNumber" data-bind="value: phoneNumber.NewValue"/><br/>
</div>
<div id="faxNumber">
<h4>Fax Number</h4>
<span>Display Value:</span>
<input id="displayFaxNumber" data-bind="value: faxNumber.DisplayValue" readonly=true /><br/>
<span>Old Value:</span>
<input id="oldFaxNumber" data-bind="value: faxNumber.OldValue" readonly=true/><br/>
<span>New Value:</span>
<input id="newFaxNumber" data-bind="value: faxNumber.NewValue"/><br/>
</div></div>
CSS
span {
display: inline-block;
width: 6em;
}
h4 {
padding-top: 5px;
font-weight:bold;
}
JavaScript
String.IsNullOrEmpty = function(value) {
var isNullOrEmpty = true;
if (value) {
if (typeof (value) == 'string') {
if (value.length > 0) {
isNullOrEmpty = false;
}
}
}
return isNullOrEmpty;
};
function FieldBlock(oldValue, newValue, fieldName) {
this.OldValue = oldValue;
this.NewValue = newValue;
this.DisplayValue = function() {
var newValue = this.get(fieldName + ".NewValue");
if (String.IsNullOrEmpty(newValue))
return this.get(fieldName + ".OldValue");
return newValue;
};
}
kendo.bind($("#practiceSection"), kendo.observable({
phoneNumber: new FieldBlock("111-111-1111", null, "phoneNumber"),
faxNumber: new FieldBlock("999-999-9999", null, "faxNumber")
}));