Kendo Editable Grid - Cancel button destroying all changes

Question

When using editable grids, while editing a row for the second time and clicking cancel, all changes are lost to the row. Expected behavior is for the current changes to be cancelled only.

To reproduce:

http://jsfiddle.net/getBalian/gHZMp/

                $(document).ready(function () {
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read:  {
                                url: "http://demos.kendoui.com/service/Products",
                                dataType: "jsonp"
                            }
                            ,update: {
                                url: "http://demos.kendoui.com/service/Products/Update",
                                dataType: "jsonp"
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        schema: {
                            model: {
                                id: "ProductID",
                                fields: {
                                    ProductID: { editable: false, nullable: true },
                                    ProductName: { validation: { required: true } },
                                    UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                    Discontinued: { type: "boolean" },
                                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                }
                            }
                        }
                    });

                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    pageable: true,
                    height: 430,
                    toolbar: ["create"],
                    columns: [
                        { field:"ProductName", title: "Product Name" },
                        { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "100px" },
                        { field: "UnitsInStock", title:"Units In Stock", width: "100px" },
                        { field: "Discontinued", width: "100px" },
                        { command: ["edit", "destroy"], title: " ", width: "160px" }],
                    editable: "popup"
                });
            });

1. Edit a row and click update
2. Edit the same row and click cancel

The row reverts back to its starting state.

If you uncomment the transport update options, the jsfiddle will work but it is not an option for us to use the ajax transport update option, as there are multiple grids on the same page which must be submitted at the same time. Is there a workaround for this, so the grid rows will not reset?

Any help would be greatly appreciated.

Answer 1

Of course it will revert the changes if there is no update method specified - the changes will be reverted since the update was not successful.

Also you cannot submit the changes of all grids at the same time within a single request.

Answer 2

Try using the following in schema

parameterMap: function (data, operation) {
                                    if (operation != "read") {                    
                                        return kendo.stringify(HoleData.models);
                                    }
                                }

I've also updated the jsfiddle.

For the second question "multiple grids on the same page which must be submitted at the same time" I'm not sure it is achievable with multiple grid updates on the same time.

A work around would be on the backend you convert the objects into a json string or xml and save those in a temp database or in a session. At the end you just dump everything in a single go in the main db.