Hello,
I've been working with WebAPI and the latest kendoui release. I haven't been able to get my inline edits to work. I've done a lot of research (I've seen every sample and ever demo / forum link) and even debugged the source.. What happens is I can edit the inline content, but as soon as I click update, the grid row rolls back.
Here's the generic controller (sample..)
Here's the javascript
Html:
When I click the grid to do inline editing, it displays correctly. The second I hit update, the row is reverted and the request isn't even sent to the server. I've been trying to get this to work for the past few days.. I should also note that the only CRUD operations that do work (outside of this slimmed down example) is Get and Delete..
I've been working with WebAPI and the latest kendoui release. I haven't been able to get my inline edits to work. I've done a lot of research (I've seen every sample and ever demo / forum link) and even debugged the source.. What happens is I can edit the inline content, but as soon as I click update, the grid row rolls back.
Here's the generic controller (sample..)
public
class
ProductSample
{
public
string
Identification {
get
;
set
; }
public
string
CategoryId {
get
;
set
; }
public
string
Name {
get
;
set
; }
public
string
Description {
get
;
set
; }
public
string
Image {
get
;
set
; }
}
public
IEnumerable<ProductSample> GetAll()
{
return
new
List<ProductSample>()
{
new
ProductSample()
{
Identification =
"1"
,
CategoryId =
"cat1"
,
Description =
"test"
,
Image =
"test"
,
Name =
"Sample"
}
};
}
Here's the javascript
$(document).ready(
function
() {
var
crudServiceBaseUrl =
"http://localhost:1867/api"
,
dataSource =
new
kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl +
"/product"
,
contentType:
"application/json; charset=utf-8"
,
dataType:
"json"
},
update: {
url: crudServiceBaseUrl +
"/product/"
,
dataType:
"json"
,
type:
"PUT"
},
destroy: {
url:
function
(o) {
return
crudServiceBaseUrl +
"/product/"
+ o.Identification;
},
dataType:
"json"
,
type:
"DELETE"
}
},
schema: {
model: {
id:
"Identification"
,
fields: {
Identification: {
type:
"string"
},
CategoryId: {
type:
"string"
},
Name: {
type:
"string"
},
Description: {
type:
"string"
},
Image: {
type:
"string"
}
}
}
}
});
var
grid = $(
"#grid"
).kendoGrid({
dataSource: dataSource,
columns: [
{
field:
"Identification"
,
title:
"Identification"
},
{
field:
"CategoryId"
,
title:
"Category Id"
},
{
field:
"Name"
,
title:
"Name"
},
{
field:
"Description"
,
title:
"Description"
},
{
field:
"Image"
,
title:
"Image"
},
{
command: [
"edit"
,
"destroy"
]
}],
editable:
"inline"
});
});
Html:
<
h2
>Products</
h2
>
<
div
id
=
"grid"
></
div
>
@section Scripts {
@Scripts.Render("~/Scripts/Products.js")
}
When I click the grid to do inline editing, it displays correctly. The second I hit update, the row is reverted and the request isn't even sent to the server. I've been trying to get this to work for the past few days.. I should also note that the only CRUD operations that do work (outside of this slimmed down example) is Get and Delete..