移动到下一个单元格后，Kendo Grid 不保存值 [英] 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');
        }
    }

})

这里是演示了解功能.我能够通过键在网格中导航，但是这样做时网格值没有被保存.我的意思是当我单击一个空单元格然后输入一个值并使用右箭头移动到下一个单元格时，则不会保存先前的值.但是当我们单击 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:附上演示链接

推荐答案

在将焦点设置到下一个单元格之前，您需要调用 _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 Grid 不保存值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！