Kendo网格移动到下一个单元格后未保存值 [英] Kendo Grid Not Saving Values After Moving to the next cell

问题描述

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

I have tried to modify the behavior of the InCell Edit Mode of kendo Grid. I mean i tried to navigate to cells using arrows but i have a problem in doing So.

这是我的代码:

$("#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');
        }
    }

})

这是 演示 .我可以通过键在整个网格中导航，但是这样做并不会保存网格值.我的意思是，当我单击一个Empty单元格，然后输入一个值并使用向右箭头键移至下一个单元格时，则不会保存前一个值.但是，当我们单击Enter或Tab或alt(两次)然后移至下一个单元格然后保存值时，将保存该值

Here is the Demo for the functionality. I am able to navigate through out the grid through the keys but while doing so the grid values are not being saved. I mean when i click on an Empty cell and then enter a value and move to the next cell using right Arrow then the previous value is not being saved. But the value is being saved when we are clicking Enter or Tab or alt(twice) and then move to the next cell then the values are being saved

PS:附加了演示链接

PS: Demo Link attached

推荐答案

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

Before you set focus on the next cell, you need to call _handleEditing. You also don't need to click in the grid and remove classes; all you need is this (example for right arrow):

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

这篇关于Kendo网格移动到下一个单元格后未保存值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！