Search code examples
kendo-gridkendo-datasource

Prevent Kendo Grid from auto saving


How can I stop the kendo grid/datasource automatically posting changes to the server?

I've tried intercepting Grid's saveChanges but it isn't being triggered by the Updated command. As per the docs, DataSource's auto-sync by default should be false, but I went ahead and set it anyway but to no effect.

$("#items-grid").kendoGrid({
 dataSource: {
autoSync: false,
type: "json",
transport: {
    read: {
        url: "@Html.Raw(Url.Action("
        ItemList ", "
        PurchaseRequisition ", new {prId = @Model.Id }))",
        type: "POST",
        dataType: "json",
    },
    update: {
        url: "@Html.Raw(Url.Action("
        ItemEdit ", "
        PurchaseRequisition "))",
        type: "POST",
        dataType: "json",
    }
},
sync: function(e) {
    console.log("sync complete");
},
schema: {
    data: "Data",
    total: "Total",
    errors: "Errors",
    model: {
        id: "Id",
        fields: {
            /...
        }
    }
},
 },
  saveChanges: function(e) {
  // not fired from  Update command
  e.preventDefault();
 },
  columns: [{
// ...
   }, {
     command: [{
    name: "edit",
    text: {
        edit: "Edit",
        update: "Update",
        cancel: "Cancel"
    }
}],
width: 100

  }]
});
   });

Solution

  • You can try with dataSource batch set to true.

    var dataSource = new kendo.data.DataSource({
      transport: {...},
      batch: true
      ...}
    
    $("#grid").kendoGrid({
      dataSource: dataSource,
      navigatable: true,
      pageable: true,
      height: 550,
      toolbar: ["create", "save", "cancel"],
      columns: [...],
      editable: true
    });
    

    NOTE: this is inline editing.

    You can see an example on the official page: Batch editing