How to catch save row event of inline editing kendo ui grid and save the changes based on each cell change

Question

I have a Inline editable kendo grid i already bind the editable grid form this link http://jsfiddle.net/alexyu/A2J9e/ i need to save the data after cell changes means after editing a cell when i will move the another cell it will automatically save the data into database i already found some solutions but not proper solution.Can anyone help me please???

here is my code for inline editable grid

 <div id="grid"></div>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


    <script>
        $(document).ready(function () {

            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            // the remote service url
                            url: '@Url.Action("GetData","Agent")',

                            // the request type
                            type: "get",

                            // the data type of the returned result
                            dataType: "json"
                        }
                    },

                    schema: {
                        model: {
                            fields: {
                                OrderID: {
                                    type: "string"
                                },

                                ADRPONumber: {
                                    type: "string"
                                },

                                Hauler: {
                                    type: "string"
                                },

                                CustomerCharges: {
                                    type: "string"
                                },
                                CustomerPaid: {
                                    type: "string"
                                },
                                HaulerCharges: {
                                    type: "string"
                                },
                                GrossProfit: {
                                    type: "string"
                                },

                                ExpectedCommission: {
                                    type: "string"
                                },
                                TotalPaidToAgent: {
                                    type:"string"
                                }
                            }
                        }
                    },


                    //serverFiltering: true,
                    //serverSorting: true

                    serverPaging: false
                },
                height: 430,
                filterable: true,
                sortable: true,
                pageable: true,
                navigatable: true,
                editable: "incell",
                columns: [{
                    field: "OrderID",
                    filterable: false

                },

                    {
                        field: "Hauler",
                        filterable: true,

                    },

                    {
                        field: "ADRPONumber",
                        title: "PO",
                        filterable: true,

                    },

                    {
                        field: "CustomerCharges",
                        title: "Charges",
                        filterable: true
                    },
                    {
                        field: "CustomerPaid",
                        title: "Received",

                        filterable: true
                    },
                    {
                        field: "HaulerCharges",
                        title: "Hauler Charges",
                        filterable: true
                    },
                    {
                        field: "GrossProfit",
                        title: "Gross Profit",
                        filterable: true
                    },
                    {
                        field: "ExpectedCommission",
                        title: "Commission",
                        filterable: true
                    },
                    {
                        field: "TotalPaidToAgent",
                        title: "Agent Paid",
                        filterable: true
                    }

                ]
            });

            var grid = $("#grid").data("kendoGrid");
            grid.table.bind("keypress", function (e) {
                debugger

                if (e.which !== 0 && e.charCode !== 0 && !e.ctrlKey && !e.metaKey && !e.altKey) {

                    debugger
                    //get currently navigated cell, this id follows user's navigation
                    var activeCell = $("#grid_active_cell");

                    //don't do anything if already editing cell
                    if (activeCell.hasClass("k-edit-cell")) return;

                    grid.editCell(activeCell);
                    var input = activeCell.find("input");

                    //number datatype editor loses key press character when entering edit
                    if (input.last().attr('data-type') === 'number') {
                        input.val(String.fromCharCode(e.keyCode | e.charCode));
                    } else {
                        input.val("");
                    }
                }
            });

            //Kendo "Enter" key input is captured through this binding
            $("#grid table").on("keydown", "tr", function (e) {

                var code = (e.keyCode ? e.keyCode : e.which);

                debugger

                if (code == 13) { //If key is ENTER
                    //find index of the td element
                    var a = $(e.target).val();
                    var tdIndex = $(e.target).closest('td').index();

                    //get the next row's cell
                    var nextRow = $(e.target).closest('tr').next();
                    var nextRowCell = $(nextRow).find('td:eq(' + tdIndex + ')');

                    //focus the next cell on a different context
                    setTimeout(function () {
                        var grid = $("#grid").data("kendoGrid");
                        grid.current(nextRowCell);
                    }, 0);
                }
            });
        });







    </script>

please help me how to do this???

i already got this cell change event like this but how to get the data and how to save this data in to database on cell change event

$("body").on("blur", "table tr.k-grid-edit-row input", function () {
        debugger

       /////

    });

Answer 1

Have you tried to set the autoSync property to true ? If you do, it should automatically save any changed data items by calling the sync method.

<script>
var dataSource = new kendo.data.DataSource({
  autoSync: true,
  transport: {
    read:  {
      url: "https://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    update: {
      url: "https://demos.telerik.com/kendo-ui/service/products/update",
      dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20); // auto-syncs and makes request to https://demos.telerik.com/kendo-ui/service/products/update
});
</script>

You can see an example and documentation here :

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/autosync

Hope this helps.