updating a cell value based on another cell value in kendo grid asp.net mvc

Question

I have been struggling with this problem for two days, any help is hugely appreciated. I have a kendo grid, in which i have given the grid excel like capabilities, i.e on hitting enter the column which is editable is highlighted and I can enter the value and on tab it moves to the next cell. I have a column called external amount which is editable, i.e the user enters the value in the cell and the next column is difference which should be computed whenever the user enters a value in the external amount column and hits on enter.

difference- InternalLocalAmt-ExternallocalAmt. InternalLocalAmt is already populated and isn't editable.

Code snippet:

@(Html.Kendo().Grid(Model)
    .Name("OutputCashGrid")
    .Columns(columns =>
    {

        columns.Bound(p => p.InternalLocalAmt).Width(130);
        columns.Bound(p => p.ExternalLocalAmt).Width(130);
  columns.Bound(p => p.LocalDifference).Title("Difference").Width(130).Format("{0:N}").HtmlAttributes(new{id="DifferenceVal"});
 })
  .Sortable()
     .ColumnMenu()
     .Scrollable(scr => scr.Height(430))
     .Filterable()
     .Navigatable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(50)
        .ServerOperation(false)
             .Batch(true) // Enable batch updates.
                       .Model(model =>
                            {
                                model.Id(p => p.OutputcashID); // Specify the property which is the unique identifier of the model.
                                //model.Field(p => p.OutputcashID).Editable(false); // Make the ProductID property not editable.
                                model.Field(p => p.OutputcashID).Editable(false);
                                model.Field(p => p.Level1).Editable(false);
                                model.Field(p => p.TotalRecitems).Editable(false);
                                model.Field(p => p.TotalReconcilingItems).Editable(false);
                                model.Field(p => p.AsOfDate).Editable(false);
                                model.Field(p => p.InternalLocalAmt).Editable(false);

                            })


           .Update("Editing_Update", "SaveRec")
           )


            .Pageable(pageable => pageable
                 .Refresh(true)
                .Input(true)
                .Numeric(false)
             )
                         .Resizable(resize => resize.Columns(true))
                         .Selectable()
                         .Events(ev => ev.Change("differenceValue"))



        )


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

        var gridOutput = $("#OutputCashGrid").data("kendoGrid");

        gridOutput.table.bind("keypress", function (e) {
            if (e.which !== 0 && e.charCode !== 0 && !e.ctrlKey && !e.metaKey && !e.altKey) {

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

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

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



                //number datatype editor loses key press character when entering edit
                if (input.last().attr('data-type') === 'number') {
                   var a= input.val(String.fromCharCode(e.keyCode | e.charCode));
                   var selectedItemRow = gridOutput.dataItem($(e.currentTarget).closest("tr"));
                } else {
                    input.val("");
                }
            }
        });


        $("#OutputCashGrid table").on("keydown", "tr", function (e) {
            var code = (e.keyCode ? e.keyCode : e.which);
            if (code == 13) { //If key is ENTER
                //find index of the td element
                var activeCell = $("#OutputCashGrid_active_cell");
                var tdIndex = $(e.target).closest('td').index();
                var tdvalue = $(e.target).closest('td').val();
                var cellvalue = activeCell.val();
                var row = $(e).closest("tr");
               // var model = $("#OutputCashGrid").dataItem(row);

                //var difference = selectedItemRow.LocalDifference
                //var TotalInternalAmt = selectedItemRow.InternalLocalAmt
                //var TotalExternalAmt = selectedItemRow.ExternalLocalAmt
                //var updatedDifference = Math.abs(TotalInternalAmt) - Math.abs(TotalExternalAmt)
                //selectedItemRow.set("Differnce", updatedDifference)
                //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 = $("#OutputCashGrid").data("kendoGrid");
                    grid.current(nextRowCell);


                }, 0);

            }
        });

</script>

I'm attaching a screenshot to show the grid.

Answer 1

I see you have posted an answer to your question already, but I was struggling with something similar quite recently myself and came up with, what I think, would be a more efficient solution.

Instead of updating all items within your grid dataSource (using your Calculations function), you could firstly attach a change event to your datasource and then access the items in your row model which have been changed and update as necessary.

For example:

var gridOutput = $("#OutputCashGrid").data("kendoGrid");
gridOutput.dataSource.bind("change", function(e) {
   // checks to see if the action is a change and the column being changed is what is expected
   if (e.action === "itemchange" && e.field === "ExternalLocalAmount") {           
       // here you can access model items using e.items[0].modelName;
       e.items[0].Difference = e.items[0].InternalLocalAmount - e.items[0].ExternalLocalAmount;
       // finally, refresh the grid to show the changes
       gridOutput.refresh();
   }
});