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

Question

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

差异- 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

看起来可能以下行阻止了其余部分运行:

var nextRowCell = $(nextRow).find('td:eq(' + tdIndex + ')');

试试这个：

var nextRowCell = nextRow.find('td:eq(' + tdIndex + ')');

Answer 2

经过多次尝试，我终于找到了解决方案，将代码贴在这里，以防有人需要它以供将来参考

function Calculations() {

        var grid = $("#StaggingCashExceptionsGridTest").data("kendoGrid");
        var TotalExternal = 0;

        var gridData = grid.dataSource.view();
        for (var i = 0; i < gridData.length; i++) {

            TotalExternal+=gridData[i].ExternalLocalAmount;//gridDaga[0].ExternalLocalAmount , takes the first row external local amount, till the number of rows in he grid. 
            TotalInternal += gridData[i].InternalLocalAmount;
        difference=TotalExternal-TotalInternal;
 $("#SubDifference").html(difference)//to set the value of difference cell
    }

Answer 3

我看到您已经发布了问题的答案，但我自己最近也在努力解决类似的问题，我想出了一个更有效的解决方案。

不是更新网格数据源中的所有项目（使用 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();
   }
});

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

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

jquery

inline-editing

asp.net-mvc-4

kendo-grid

kendo-asp.net-mvc