kendo-datasource autoSync 导致导航占位符 return 到网格的左上角

Question

我正在使用 kendo-ui 和 angularJS 1.5，我有一个简单的 kendo-grid 绑定到数据源，传输配置使用函数如下:

private buildDataSource() {
    this.dataSource = new kendo.data.DataSource({
        autoSync: true,
        change: this.dataSourceChangeHandler.bind(this),
        error: this.dataSourceErrorHandler.bind(this),
        transport: {
            read: this.dataSourceRead.bind(this),
            create: this.dataSourceCreate.bind(this),
            update: this.dataSourceUpdate.bind(this),
            destroy: this.dataSourceDestroy.bind(this)
        },
        [...]
    });
}

private dataSourceUpdate(e: kendo.data.DataSourceTransportUpdate) {

    var updatedItem: KendoCosto = e.data;
    [...]
    e.success(updatedItem, undefined, undefined);
}

网格选项如下所示：

        this.gridOptions = {
            dataSource: this.dataSource,
            change: this.gridChangeHandler.bind(this),
            editable: {
                mode: "incell",
                confirmation: false
            },
            navigatable: true,
            selectable: "multiple, cell",
            allowCopy: true,
            toolbar: [
                "create"
            ],
            [...]

网格工作正常，读取、创建、更新、销毁的行为符合预期。我的问题是，每当我更改网格单元格中的值并按回车键时，我都希望键盘导航 "placeholder"（网格具有可导航的：true）保留在已编辑的单元格上，但它恰好被移动了到左上角的单元格。只有当 dataSource 的 autoSync 设置为 true 时才会发生此行为。我还尝试通过网格 api 的“.current”方法 "set" 当前单元格，但它似乎不起作用：

    // this is bound to the grid's change event and it is supposed to
    // store the currently selected cell in a property of the class
    // that builds both the datasource and the grid
    private gridChangeHandler(e: kendo.ui.GridNavigateEvent) 
    {
        this.thisGrid = this.thisGrid || e.sender;
        this.currentCell = e.sender.current();
    }

    // Then on the change event of the datasource I do
    private dataSourceChangeHandler(event: kendo.data.DataSourceChangeEvent)            
    {
        if (this.currentCell && this.thisGrid) {
            this.thisGrid.select(this.currentCell);
            this.currentCell = undefined;
        }
    }

有什么建议吗？

提前致谢！

--- 编辑 ---

我posted/pasted在评论中的代码绝对不可读所以我在这里重复代码：

为了让您的解决方案生效，我不得不以这种方式修改我的 dataBound 处理程序。

private gridDataBoundHandler(e: kendo.ui.GridDataBoundEvent) { 
    if (this.thisGrid && this.currentCell) { 
        setTimeout((() => { 
            // this.thisGrid.editCell(this.currentCell);    
            this.thisGrid.current(this.currentCell); 
        }).bind(this)
        , 10); 
    }
}

没有超时，导航占位符仍然重置回左上角。

Answer 1

首先，我认为网格更改事件是错误的附加事件，因为它仅在用户使用鼠标选择 row/cell 时触发...它不会在选项卡事件上触发。

所以，我会使用网格保存事件，它会在您进行编辑后触发，"commit" 通过回车、Tab、鼠标关闭等方式进行更改

其次，e.sender.current()包括当前识别信息，如"grid_active_cell"和"k-state-focused"和"k-dirty-cell"等. 当你到达数据源更改事件时，单元格实际上已经失去了所有装饰，你的 this.currentCell 基本上指向一个不存在的选择器。因此，您需要获取更多 "permanent" 标识符。

因此，使用网格保存事件：

save: function (e) {
    var row = $(e.sender.current()).closest("tr");
    var colIdx = $("td", row).index(e.sender.current());
    var model = e.sender.dataItem(row);
    currentCell = "tr[data-uid='" + model.uid + "'] td:eq(" + colIdx + ")";
}

然后在网格 DATABOUND 事件中（因为 dataSource 更改事件之后仍然是将单元格焦点更改为左上角的事件，但 grid.dataBound 在链中更远并且似乎工作得更好):

dataBound: function (e) {
    if (currentCell) {
        grid.editCell(currentCell);
        grid.current(currentCell);
    }
}

Demo（由于我没有你的整个 class，所以有变量变化，基于 kendo 网格演示）：http://dojo.telerik.com/@Stephen/OjAsU

请注意，此解决方案（不是我的实现，而是您的一般技术）将打破单元格之间的制表符，即制表符将提交编辑，但数据源更改事件将始终将焦点放回刚刚编辑的单元格，而不是移动到选项卡式单元格。这打破了用户对选项卡功能的期望。因此，您应该考虑尝试仅捕获回车键按下，而不是依赖于网格事件（无论 tab 还是 enter 都会触发）。

kendo-datasource autoSync 导致导航占位符 return 到网格的左上角

kendo-datasource autoSync causes navigation placeholder to return to upper left corner of the grid

kendo-ui

kendo-grid

kendo-datasource