jquery - Kendo Grid 在移动到下一个单元格后不保存值

Question

我尝试修改kendo Grid的InCell编辑模式的行为。我的意思是我尝试使用箭头导航到单元格，但这样做时遇到问题。

这是我的代码:

$("#grid").keydown(function (e) {
    debugger;
    isEditStarted = true;
    var totlaColumns = $($(" #grid td")[0]).nextAll().length + 1;
    currentTD = $(" #grid td.k-edit-cell");
    var indexx = $("#grid td").index($(" #grid td.k-edit-cell"));
    //currentTDIndex = $(currentTD).parent().children().index($(currentTD)) + 1;
    if (isEditStarted) {
        var code = e.keyCode || e.which;
        if (code === 37) {


            //left Key
            //var eventEnter = jQuery.Event("keypress");
            //eventEnter.which = 18;
            //eventEnter.keyCode = 18;
            var x = "#" + $($(" #grid td")[$(" #grid td").index($(" #grid td.k-edit-cell"))]).find('input').attr('id');
            var valuem = $(x).val();
            var position = $(currentTD).prevAll("td").length + 1;
            var length = $(currentTD).prevAll("td").length;
            if (length > 1) {

                debugger;
                $("#grid tr td").removeClass('BorderHighlight');
                $(x).val(valuem);
                $($(currentTD).prevAll("td")[0]).click();
                $($(currentTD).prevAll("td")[0].childNodes[0]).addClass('BorderHighlight');

            }


        }
        else if (code === 38) {
            currentTD = $(" #grid td.k-edit-cell");
            var position = $(currentTD).prevAll("td").length + 1;
            var currentRow = $(" #grid td.k-edit-cell").parent().parent().find('tr').index($(" #grid td.k-edit-cell").parent());
            var newPosition = currentRow > -1 ? (currentRow - 1) * totlaColumns + position - 1 : 0;
            $($(" #grid td")[newPosition]).click();
            $($(" #grid td")[newPosition].childNodes[0]).addClass('BorderHighlight');

        }
        else if (code === 39) {
            currentTD = $(" #grid td.k-edit-cell");
            var length = $(currentTD).nextAll("td").length;
            if (length > 1) {
                $("#grid tr td").removeClass('BorderHighlight');
                $($(currentTD).nextAll("td")[0]).click();
                $($(currentTD).nextAll("td")[0].childNodes[0]).addClass('BorderHighlight');
            }

        }
        else if (code === 40) {
            currentTD = $(" #grid td.k-edit-cell");
            var position = $(currentTD).prevAll("td").length + 1;
            var currentRow = $(" #grid td.k-edit-cell").parent().parent().find('tr').index($(" #grid td.k-edit-cell").parent());
            var newPosition = currentRow > -1 ? (currentRow + 1) * totlaColumns + position - 1 : 0;
            $($(" #grid td")[newPosition]).click();
            $($(" #grid td")[newPosition].childNodes[0]).addClass('BorderHighlight');
        }
    }

})

这是 Demo为了功能。我可以通过按键在网格中导航，但这样做时网格值不会被保存。我的意思是，当我单击空单元格，然后输入一个值并使用右箭头移动到下一个单元格时，不会保存前一个值。但是，当我们单击 Enter 或 Tab 或 alt(两次)然后移动到下一个单元格时，值就会被保存

PS:附演示链接

Answer 1

在将焦点设置到下一个单元格之前，您需要调用_handleEditing。您也不需要单击网格并删除类；您所需要的就是这个(右箭头示例):

var code = e.keyCode || e.which,
    grid = $("#grid").data("kendoGrid"),
    current = grid.editable.element,
    next = $(current).nextAll("td").eq(0),
    container = $(e.target).closest("[role=gridcell]"),
    length;

if (code === 39) {
    length = $(current).nextAll("td").length;
    if (length > 1) {

        if (!container[0]) {
            container = current;
        }

        grid._handleEditing(container, next, e.currentTarget);
    }
}