I have a newly created Telerik project to which I've only added Entity Framework and WebAPI. I've used the KendoUI scaffolder to create a simple Grid from a very simple model (and hopefully corrected the errors in the scaffolder in the latest version). Read (GET) and Create (POST) work fine, but Update and Delete doesn't work. When trying to do Update or Delete, I get:
kendo.all.min.js:9 "Uncaught TypeError: e.replace is not a function"
Any idea of what is wrong? I am quite sure it is something quite simple.
I've attached code below
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
height: 400,
columns: [
{field: "Name"},
{command: [ "edit" , "destroy"], width: 180 }
],
toolbar: ["create"],
dataSource: {
type: "webapi",
transport: {
create: {
url: "/api/AccommodationTypes/",
contentType: "application/json",
type: "POST"
},
read: {
url: "/api/AccommodationTypes/",
contentType: "application/json"
},
update: {
url: function (accommodationType) {
return "/api/AccommodationTypes/" + accommodationType.id;
},
contentType: "application/json",
type: "PUT"
},
destroy: {
url: function (accommodationType) {
return "/api/AccommodationTypes/" + accommodationType.id;
},
contentType: "application/json",
type: "DELETE"
},
parameterMap: function (data, operation) {
return JSON.stringify(data);
}
},
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: "inline",
selectable: "single row",
filterable: {
mode: "row"
},
scrollable: true
})
</script>
6 Answers, 1 is accepted
The observed error indicates that the server response does not meet the Grid DataSource requirements (e.g. the defined schema), which are described on the following documentation page:
http://docs.telerik.com/kendo-ui/framework/datasource/crud
Here are some resources that you can take a look at:
https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/odata-v4-web-api-binding
https://www.youtube.com/watch?v=HBALzROBX8k
On a side note, dataSource.type of "webapi" is intended to be used only with the Kendo UI MVC wrappers, when the kendo.aspnetmvc.js is registered. Unless you have a special reason to set this dataSource.type value and have implemented the server code in accordance with the Kendo UI MVC Grid documentation, I recommend removing it.
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/webapi-editing
https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/odata-v4-web-api-binding-wrappers
Using internal APIs from the Kendo UI MVC wrappers in the HTML5/JS widgets is not officially supported.
Regards,
Dimo
Telerik
Rank 1
Iron
Iron
Hi Dimo and thanks for responding to this,
Could you please tell what i actually needed to change in order to get this to work? I've already been through most of the links you gave and that didn't make me solve this.
"On a side note, dataSource.type of "webapi" is intended to be used only
with the Kendo UI MVC wrappers, when the kendo.aspnetmvc.js is
registered. Unless you have a special reason to set this dataSource.type
value and have implemented the server code in accordance with the Kendo
UI MVC Grid documentation, I recommend removing it."
This is code generated by Teleriks own scaffolder by choosing the Kendo UI grid (non MVC) and selecting WebAPI from the Datasource type menu. And now you are telling us that the generate code is wrong and that Kendo UI non MVC version doesn't even support WebAPI? Or am I missing something here?
If Kendo UI HTML5/JS does not support WebAPI (which is bad in itself), what Datasource Types does it actually support and which of these are prefered? In the Scaffolder there is also "AJAX" (which seem to work fine) and "Server" which doesn't say anything to me what it is.
Please enlighten us :)
Rank 1
Iron
Iron
Rank 1
Iron
Iron
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>
Thank you for sharing a working implementation.
I admit that the current Scaffolder suffers from some issues and I understand your disappointment. We will do our best to address these as soon as possible. To be more specific, generating type:"webapi" is an oversight on our end, as it assumes that the kendo.aspnetmvc.js script is available, which may not be the case for developers that use Kendo UI Professional only. We will need to choose one of several options - remove the generated dataSource type, remove the dependency to the Kendo UI MVC script, make the dependency clear to developers, or abandon this scenario and remove it from the Scaffolder. We still need to evaluate all options before making a decision, but at this point we are inclined towards the third option and listing the required dependencies in the Scaffolder wizard.
Regards,
Dimo
Telerik
Rank 1
Iron
Iron
Hi Dimo,
Thanks for responding.
Sorry for coming down so hard on the scaffolder but I think this is a really important area and something Telerik definitely should invest some time and money in. Scaffolding and code-generation tools are really important to me as a developer, to enable me to be as productive as possible. Especially when it comes to "simple and boring" stuff like creating for example 15 very similar CRUD pages. What I've read about the Kendo UI 2.0 plattform being released soon sounds promising, and Telerik really need to up your game here compared to the likes of DevExpress, Infragistics etc. which seem to be ahead in this area.