How to modify kendo grid's edited value before posting to server

Question

I have a Kendo grid that is enabled for InCell editing. The Grid is also configured for CURD operation. So whenever there is a change in the grid row. The user has to click SaveChanges command button to save changes. The grid will post collection of row model to the server.

@(Html.Kendo().Grid<mymodel>()
  .Name("mygrid")
  .Columns(columns =>
  {
    //columns here
    columns.Command(command => command.Destroy()).Width(100);
  })
  .ToolBar(toolbar =>
  {
    toolbar.Create();
    toolbar.Save();
  })
  .Editable(editable => editable.Mode(GridEditMode.InCell))
  .Pageable()
  .Navigatable()
  .Sortable()
  .Scrollable()
  .Filterable()
  .AutoBind(true)
  .DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .PageSize(20)
    .ServerOperation(false)
    .Model(model =>
    {
      model.Id("Id");
      var f = model.Field("Id", typeof(int));
      f.Editable(false);
    })
    .Model(model =>
    {
      model.Id("Id");
      var f = model.Field("Id", typeof(int));
      f.Editable(false);
    })
    .Create("Create", "Test")
    .Read("Get", "Test")
    .Update("Update", "Test")
    .Destroy("Delete", "Test")
  ))

When user clicks SaveChanges, I want to modify the row model before posting to the server.

Grid has SaveChanges event which get fire every time user click SaveChanges

$(function(){
    var kendoGrid = $("#mygrid").getKendoGrid();

    kendoGrid.bind("saveChanges", function (e) {

        var datasource = kendoGrid.dataSource;

        // how do I update data before posting it to the server here

    });

How do I update model that is about to post to server? Is SaveChanges event the correct event to handle this scenario?

Answer 1

I im not familiar with kendo for asp.net so i cannot give you exact answer, but usually you can intercept, or add, or modify data in parameterMap before sending, for example:

dataSource = new kendo.data.DataSource({
    transport: {
        read:  {
            url: crudServiceBaseUrl + "/Products",
            dataType: "jsonp"
        },
        update: {
            url: crudServiceBaseUrl + "/Products/Update",
            dataType: "jsonp"
        },
        destroy: {
            url: crudServiceBaseUrl + "/Products/Destroy",
            dataType: "jsonp"
        },
        create: {
            url: crudServiceBaseUrl + "/Products/Create",
            dataType: "jsonp"
        },
        parameterMap(data, type) {
            switch (type) {
                case 'read':
                    let request = {};
                    request.page = data.page - 1;
                    request.page_size = data.pageSize;
                    request.sort = data.sort;
                    request.filter = data.filter;

                    return JSON.stringify(request);
                case 'destroy':
                    return kendo.stringify(data.models);
                case 'update':
                    console.log("Data that that will be sent for updating: ", data.models);
                    return kendo.stringify(data.models);
                default:
                    break;
            }
        }
    },
    batch: true,
    pageSize: 20,
    schema: {
        model: {
            id: "ProductID",
            fields: {
            
            }
        }
    }
});

You can check this official example, i only changed ProductName on first object that will be sent on update click:

Batch update intercept before sending

I hope you can salvage something from this, gl!

Answer 2

The Save changes event is the one you want. Since your using mvc you can also set the event up with the rest of your grid by doing .Events(e=>e.SaveChanges"onGridSave"). Then onGridSave becomes a javascript function you define.

The .Events() goes at the same level as .Pageable() or .Navigatable().

Then in your javascript function you could do something like this:

function onGridSave(e){
   e.sender.dataSource._data[0].PropertyName = "new value/data manipulation"
}

PropertyName being the model property you want to modify. The _data[0] refers to the first element in your dataSource. You may need to iterate or adjust the index to reach the row you want to modify.

Rows that have been modified will have a ._data[0].dirty property set to true. Only elements with dirty set to true will be passed to your controller.