This is a migrated thread and some comments may be shown as answers.

Please Help: Grid Inline updating not working.

7 Answers 1726 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Blake asked on 17 Jul 2012, 06:49 PM

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..)

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..

7 Answers, 1 is accepted

answered on 17 Jul 2012, 07:48 PM

KendoOverride.zip

Unfortuantely no, I have not gotten an answer. If you want to test whether your issue is the same as the one I am experiencing, you can try the hack that I used.

Reference the file I have attached on your web page, after the other kendo ui scripts have been referenced but before your own custom scripts.

If it is the same problem, this would fix it. It would be interesting to test this out, although I know it is not a good solution to hack their code.

answered on 18 Jul 2012, 09:43 PM

Blake

Without seeing what's happening on the server, it's difficult to know exactly what your issue is. I am working on the next module in the ASP.NET series and it deals with inline editing. I'm not finished with it, but I have gone ahead and checked it into GitHub. The files of interest will be the Default.aspx and the EmployeesController.

If the grid is existing edit mode and not saving reflecting your changes, either your model is malformed or the server is sending back something other than a 200 to indicate a successful update. What do your dev tools say in the browser when you click the update button?

https://github.com/telerik/html5-dev-for-aspnet-devs/tree/master/hello-kendo-ui-part-2

I did notice in your code sample above that you are not updating a specific endpoint - i.e. /api/employees/1, then your parameters should come along on the request object. This may or may not be your issue as I'm not sure what your WebAPI controller looks like.

Hopefully this helps clear up your issue.

Burke