JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<div id="view">
<label>First Name: </label>
<input type="text" data-bind="value: Data.Primary.FirstName" />
<br />
<label>Last Name: </label>
<input type="text" data-bind="value: Data.Primary.LastName" />
<br />
<button data-bind="click: Actions.postToServer">Save</button>
</div>
JavaScript
var viewModel = kendo.observable({
Data: {
Primary: {
FirstName: "Ken",
LastName: "Griffey"
},
SomethingElse: {
Color: "Blue",
Age: 74
}
},
Actions: {
postToServer: function() {
$.ajax({
type: "POST",
url: "http://this/doesnt/matter",
success: function(msg) {
alert(msg);
},
data: viewModel.Data.toJSON()
});
}
}
});
$(document).ready(function() {
kendo.bind($("#view"), viewModel);
});