Please Help: Grid Inline updating not working.

[Blake]

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

[Blake]

I believe this issue is related: http://www.kendoui.com/forums/ui/grid/problem-with-updates-using-kendo-grid-with-mvc-4-web-api-controller.aspx 

[Alex VonBrand]

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.

[Blake]

Hello,

Is this for the latest release?

[Burke]

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

[Blake]

Hello,

Thanks for posting that. I will take a look. I did attach a complete sample application via support if you want to take a look. Regardless of what the controller looks like, there isn't even a request being sent out by the grid..

[Baskar]

Hi I am also facing this same issue. Could any one please help me on this?

[Scott]

Hey Baskar, I was facing the same issue last night around midnight before calling it quits.

Good thing I did. With a fresh brain, I fixed this issue in a way I have not seen when searching google (though I tried many of the suggested workarounds to no avail).

So what finally fixed it for me? I removed this decorator from my controller's methods:

[AcceptVerbs(HttpVerbs.Post)]

Now I'm back in business :) Good luck!!