剑道网格细胞刷新后重新聚焦 [英] 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?

推荐答案

如果没有在演示中看到它，很难确切地说出发生了什么，所以，如果可以，我建议创建一个用于说明。我猜测对刷新的调用是删除当前的单元格选择并聚焦第一个单元格，因为网格是可导航的（我不太明白这种行为背后的基本原理） ，但很难说它是否是一个错误，因为我们没有阅读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).

可能有效的一种方法是修改当前方法还存储当前单元格索引：

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屋！