JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<form id="form">
<section id="view">
<section class="field">
<label for="Textbox" class="k-label">Textbox</label>
<input type="text" class="k-textbox" id="Textbox" data-bind="value: entity.textbox" required="required" validationmessage="Please enter {0}"/>
</section>
<section class="field">
<label for="Numeric" class="k-label">Numeric</label>
<input type="text" id="Numeric" data-role="numerictextbox" data-bind="value: entity.numeric" required="required" validationmessage="Please enter {0}"/>
</section>
<section class="field" >
<label for="Date" class="k-label" >Date</label>
<input type="text" id="Date" data-role="datepicker" data-bind="value: entity.date" />
</section>
<section class="field" >
<label for="Datetime" class="k-label">Datetime</label>
<input type="text" id="Datetime" data-role="datetimepicker" data-bind="value: entity.datetime"/>
</section>
<section clashttp://jsfiddle.net/Haplo63/CjQtd/#runs="field" >
<label for="Combobox" class="k-label" >Combobox</label>
<select id="Combobox" data-role="combobox" data-bind="source: comboboxSource, value: entity.combobox" data-text-field="text" data-value-field="value"></select>
</section>
<section class="field" >
<label for="Autocomplete" class="k-label" >Autocomplete</label>
<input type="text"...
CSS
.k-label
{
width: 150px;
display: inline-block;
font-weight: bold;
vertical-align:top;
}
section.field
{
margin-bottom: 10px;
margin-left: 10px;
}
input.radio
{
display: inline-block;
}
label.radio
{
margin-left: 10px;
vertical-align: top;
}
fieldset.radio
{
display: inline;
padding: 0px;
border-style: none;
}
.k-loading-mask
{
z-index: 99;
background-color: rgba(255, 255, 255, 0.90);
}
JavaScript
$(document).ready(function ()
{
window.validator = $("#view").kendoValidator().data("kendoValidator");
window.viewModel = kendo.observable({
entity: null,
recordId: null,
saveCommand: function (e)
{
e.preventDefault(true);
if (window.validator.validate())
{
var enityJson = JSON.stringify(viewModel.entity);
$.ajax(
{
type: "POST",
dataType: "json",
url: "/service/save",
data: enityJson,
contentType: "application/json",
success: function (xml)
{
},
error: function (e)
{
}
});
}
},
loadCommand: function(id)
{
if (id)
{
kendo.ui.progress($("#view"), true);
viewModel.set("recordId", id);
$.ajax(
{
type: "GET",
url: "/service/read",
data: "id=" + id,
contentType: "text/plain",
dataType: "text",
async: true,
success: function (data)
...