JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2013.1.226/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.mobile.all.min.css">
<div id="fieldTab">
<button data-bind="click: validate">Validate</button>
<button data-bind="click: add">Add</button>
<button data-bind="click: remove">Remove Last</button>
<div data-bind="source: data" data-template="fieldsTemplate" />
</div>
<script id="fieldsTemplate" type="text/x-kendo-template">
<div>
<input name="field1#= fieldSys #" required data-bind="value: field1" />
<br />
<input name="field2#= fieldSys #" required data-bind="value: field2" />
<br />
<input name="field3#= fieldSys #" required data-bind="value: field3" />
<br />
<button data-bind="click: clear">Clear</button><br />
</div>
</script>
JavaScript
var fieldTab = $("#fieldTab");
var validator = fieldTab.kendoValidator().data("kendoValidator");
var data = new kendo.data.ObservableArray([
{'fieldSys': 1, 'field1': 1, 'field2': 2, 'field3': 3},
{'fieldSys': 2, 'field1': 4, 'field2': 5, 'field3': 6}
])
var Field = kendo.data.Model.define(
{
id: "fieldSys",
fields:
{
fieldSys: { type: "number" },
field1: { type: "number" },
field2: { type: "number" },
field3: { type: "number" }
}
});
viewModel = kendo.observable({
add: function (e) {
alert('Added but does not reflect in UI');
viewModel.data.push({field1:null, field2: null, field3:null, fieldSys: viewModel.data.length+1});
},
remove: function (e) {
alert('Removed but does not reflect in UI');
viewModel.data.pop();
},
clear: function (e) {
var field = e.data;
field.set('field1', null);
field.set('field2', null);
field.set('field3', null);
},
data: data,
validate: function (e) {
$("#fieldTab").data("kendoValidator").validate();
}
});
kendo.bind(fieldTab, viewModel);