JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<div id="landenlist"></div>
<button class="add-land"></button>
JavaScript
var dslanden = new kendo.data.DataSource({
transport: {
read: {
url: "/Api/InstrumentLand"
},
destroy: {
url: "/Api/InstrumentLand",
dataType: "json",
type: "DELETE"
},
create: {
url: "/Api/InstrumentLand",
dataType: "json",
type: "POST"
},
update: {
url: "/Api/InstrumentLand",
dataType: "json",
type: "PUT"
}
},
batch: false,
schema: {
model: {
id: "LandId",
fields: {
LandId: {
validation: {
required: true
}
},
InstrumentId: {
validation: {
required: true
}
},
Code: {
validation: {
required: true
}
},
Naam: {
validation: {
required: true
}
}
}
}
}
});
$("#landenlist").kendoGrid({
editable: "inline",
columns: [
{
field: "InstrumentId"},
{
field: "LandId"},
{
field: "Code"},
{
field: "Naam"},
{
command: [{
name: "destroy",
text: "Delete"}]}
],
dataSource: dslanden
});
$(".add-land").click(function() {
dslanden.add({
InstrumentId: 5,
LandId: 3,
Code: "DE",
Naam: "Duitsland"
});
//dslanden.sync();
});