根据kendo grid asp.net mvc中的另一个单元格值更新单元格值

Question

我已经为这个问题苦苦挣扎了两天，非常感谢任何帮助。我有一个剑道网格，其中我给了网格 excel 一样的功能，即在点击输入时，可编辑的列被突出显示，我可以输入值，并在选项卡上移动到下一个单元格。我有一个名为 external amount 的列是可编辑的，即用户在单元格中输入值，下一列是差异，每当用户在外部金额列中输入一个值并点击回车时，就应该计算该差异。

差异-InternalLocalAmt-ExternallocalAmt。InternalLocalAmt 已填充且不可编辑。

代码片段：

@(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>

我附上了一个屏幕截图来显示网格。

Answer 1

我看到你已经发布了你的问题的答案，但我自己最近也在为类似的事情苦苦挣扎，并想出了我认为更有效的解决方案。

Calculations您可以先将change事件附加到数据源，然后访问行模型中已更改并根据需要更新的项目，而不是更新网格数据源中的所有项目（使用您的函数）。

例如：

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();
   }
});