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

我看到你已经在你的问题上找到了答案，但是我最近自己也在努力解决类似问题，并提出了我认为更有效的解决方案。

您可以先将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();
   }
});

Answer 2

看起来可能以下行阻止了其他行的运行：

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

请改为尝试：

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

Answer 3

我经过多次尝试后终于得到了解决方案，在此处发布代码以防任何人可能需要它以供将来参考

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
    }

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

3 个答案: