To help others I post some code that ACTUALLY WORKS with the Kendo UI Datasource unlike the code produced by the Kendo UI Scaffolder in the latest version of Kendo UI. Must say I am a bit frustrated and concerned about the scaffolding problems in this release of Kendo UI, I mean, the hole point of having a scaffolder is that it generates working code, it not it's quite pointless. Anyway, here we go:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
height: 400,
columns: [
{field: "Name"},
{command: [ "edit" , "destroy"], width: 180 }
],
toolbar: ["create", "excel", "pdf"],
dataSource: {
//type: "webapi",
transport: {
read: {
url: "/api/AccommodationTypeViewModels",
datatype: "json",
type: "GET"
},
create: {
url: "/api/AccommodationTypeViewModels",
datatype: "json",
type: "POST"
},
update:
{
url: function (data) {
return "/api/AccommodationTypeViewModels/" + data.Id;
},
datatype: "json",
type: "PUT"
},
destroy: {
url: function (data) {
return "/api/AccommodationTypeViewModels/" + data.Id;
},
datatype: "json",
type: "DELETE"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" }
}
}
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
serverGrouping: true,
serverAggregates: true,
},
editable: "popup",
selectable: "single row",
sortable: {
mode: "single"
},
filterable: {
mode: "row"
},
change: onChange,
save: onSave,
scrollable: true
})
function onChange(e){
//Implement the event handler for change
}
function onSave(e){
//Implement the event handler for save
}
</script>