剑道网格单元刷新后重新聚焦 [英] Kendo grid cell refocusing after refresh

问题描述

我有一个可选择、可导航和可编辑的网格.在单元格中输入值后，我必须更改更新单元格下单元格中的值.要显示两个单元格的更新值，我必须刷新网格.当我这样做时，编辑的单元格失去焦点.我找到了一种在保存事件期间重新聚焦最后编辑的单元格的方法:

I have a selectable, navigatable and editable grid. After I enter a value in a cell, I have to change the value in the cell under the updated cell. To show the updated values of both cells, I have to refresh the grid. When I do that, the edited cell loses focus. I found a way to refocus the last edited cell during the save event:

save: function (e) {
    var focusedCellIndex = this.current()[0].cellIndex;    //gets the cell index of the currently focused cell

    //...some dataItem saving (dataItem.set()) logic...

    this.refresh();    //refreshing the grid instance

    setTimeout(function () {    //refocusing the cell
        return function () {
            var focusedCell = $("#grid tr[data-uid='" + dataItem.uid + "'] td:nth-child(" + (focusedCellIndex + 1) + ")");
            $('#grid').data('kendoGrid').editCell(focusedCell);
        }
    }(), 200);
}

问题是这是第一次起作用，但是如果我再次尝试重新编辑同一个单元格，该单元格会失去焦点.当我尝试调试时，似乎 this.current()[0].cellIndex 在第二次尝试中返回 0，并且由于该单元格聚焦不起作用没有了.

The problem is that this works for the first time, but if I try to re-edit the same cell again, the cell loses focus. When I try to debug, it seems that this.current()[0].cellIndex returns 0 in the second attempt, and because of that cell focusing isn't working anymore.

有谁知道为什么 this.current() 第一次有效，而不是第二次?是否有其他方法可以重新聚焦单元格?

Does anyone have any idea why this.current() works for the 1st time, and not for the 2nd time? Are there any other approaches for refocusing the cell?

推荐答案

如果没有在演示中看到它，很难准确地说出正在发生的事情，所以如果可以的话，我建议创建一个用于说明的.我猜对 refresh 的调用正在删除当前的单元格选择并聚焦第一个单元格，因为网格是可导航的(我不太明白这种行为背后的基本原理，但很难说这是否是一个错误，因为我们无法阅读 Telerik 的代码注释).

It's difficult to say exactly what is happening without seeing it in a demo, so if you can, I'd suggest creating one for illustration. I'm guessing that the call to refresh is removing the current cell selection and focusing the first cell because the grid is navigatable (I don't quite understand the rationale behind that behavior, but it's hard to say whether it's a bug since we don't get to read Telerik's code comments).

一种可能有效的方法是修改 current 方法以同时存储当前单元格索引:

One approach that might work would be to modify the current method to also store the current cell index:

kendo.ui.Grid.fn.refresh = (function(refresh) {
    return function(e) {
        this._refreshing = true;

        refresh.call(this, e);

        this._refreshing = false;
    }
})(kendo.ui.Grid.fn.refresh);

kendo.ui.Grid.fn.current = (function(current) {
    return function(element) {
        // assuming element is td element, i.e. cell selection
        if (!this._refreshing && element) {
            this._lastFocusedCellIndex = $(element).index(); // note this might break with grouping cells etc, see grid.cellIndex() method
            this._lastFocusedUid = $(element).closest("tr").data("uid");
        }

        return current.call(this, element);
    }
})(kendo.ui.Grid.fn.current);

kendo.ui.Grid.fn.refocusLastEditedCell = function () {
    if (this._lastFocusedUid ) {
        var row = $(this.tbody).find("tr[data-uid='" + this._lastFocusedUid + "']");
        var cell = $(row).children().eq(this._lastFocusedCellIndex);
        this.editCell(cell);
    }
};

那样，您应该始终能够在需要时使用 grid.refocusLastEditedCell().

That way, you should always be able to use grid.refocusLastEditedCell() when you need to.

另一个想法:

save: function (e) {
    var focusedCell = this.current();
    var focusedCellIndex = focusedCell.index();    //gets the cell index of the currently focused cell

    //...some dataItem saving (dataItem.set()) logic...

    this.refresh();    //refreshing the grid instance

    // reset current cell..
    this.current(focusedCell);

    setTimeout(function () {    //refocusing the cell
        return function () {
            var focusedCell = $("#grid tr[data-uid='" + dataItem.uid + "'] td:nth-child(" + (focusedCellIndex + 1) + ")");
            $('#grid').data('kendoGrid').editCell(focusedCell);
        }
    }(), 200);
}

这篇关于剑道网格单元刷新后重新聚焦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！