Kendo ui 剑道数据源自动同步使导航占位符返回到网格的左上角

我在angularJS 1.5中使用剑道ui，我有一个简单的剑道网格绑定到一个数据源，使用如下函数配置传输：

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"
            ],
            [...]

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

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

有什么建议吗

提前谢谢

---编辑---

我在评论中发布/粘贴的代码完全不可读，因此我在这里重复代码：

为了让您的解决方案正常工作，我必须以这种方式修改我的数据绑定处理程序

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

---

在没有超时的情况下，导航placeholde仍在重置回左上角。

首先，我认为网格更改事件是要附加到的错误事件，因为它仅在用户用鼠标选择行/单元格时触发…它不会在tab事件时触发

因此，我将使用grid save事件，该事件在您进行编辑并通过enter、tab、mouse off等“提交”更改后触发

其次，e.sender.current（）包含当前标识信息，如“grid\u active\u cell”、“k-state-focused”和“k-dirty-cell”等。当您到达数据源更改事件时，该单元格实际上已经失去了所有装饰，而您的this.currentCell实际上指向了一个不存在的选择器。因此，您需要获取一个更“永久”的标识符

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

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

然后在grid DATABOUND事件中（因为dataSource change事件之后仍然是将单元格焦点更改为左上角的事件，但是grid.DATABOUND在链中的位置更高，似乎工作得更好）：

演示（根据剑道网格演示，由于我没有你的整个职业，所以有变量更改）：

---

请注意，此解决方案（不是我的实现，而是您的一般技术）将打破单元格之间的制表符，即制表符将提交编辑，但数据源更改事件将始终将焦点放回刚刚编辑的单元格，而不是移动到制表符到单元格。这打破了用户对tab的预期。因此，您应该考虑只捕获输入键按下，而不是依赖网格事件（不管Tab或输入是否触发）。

< P>首先，我认为网格更改事件是错误的事件，因为它只在用户用鼠标选择行/单元格时触发，它不会在Tab事件上触发。 因此，我将使用grid save事件，该事件在您进行编辑并通过enter、tab、mouse off等“提交”更改后触发

其次，e.sender.current（）包含当前标识信息，如“grid\u active\u cell”、“k-state-focused”和“k-dirty-cell”等。当您到达数据源更改事件时，该单元格实际上已经失去了所有装饰，而您的this.currentCell实际上指向了一个不存在的选择器。因此，您需要获取一个更“永久”的标识符

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

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

然后在grid DATABOUND事件中（因为dataSource change事件之后仍然是将单元格焦点更改为左上角的事件，但是grid.DATABOUND在链中的位置更高，似乎工作得更好）：

演示（根据剑道网格演示，由于我没有你的整个职业，所以有变量更改）：

---

请注意，此解决方案（不是我的实现，而是您的一般技术）将打破单元格之间的制表符，即制表符将提交编辑，但数据源更改事件将始终将焦点放回刚刚编辑的单元格，而不是移动到制表符到单元格。这打破了用户对tab的预期。所以，你应该考虑只捕获Enter键按下，而不是依赖于网格事件（不管Tab或Enter是什么），

谢谢！我还没有弄清楚如何捕获和存储当前选定的单元格：-）。而且，使用来自网格的数据绑定事件也是一个更好的解决方案，而不是用超出其职责范围的东西干扰数据源。把选定的单元格放在刚刚编辑过的单元格上也没那么糟糕。在previos情况下，选项卡的效果与按enter键相同！现在，用户可以移动到下一个单元格，并进行两次切换。比以前好多了！非常感谢你！啊，我必须修正我之前的评论：在我的实现中，编辑单元格后按tab键仍然会将导航占位符带到左上角。。。。。。在您的示例中，两次单击tab键将用户移动到下一个可编辑单元格，但他需要单击enter键才能进入编辑模式。。。我必须深入挖掘：）。在任何情况下，点击tab键两次，然后按enter键都比将占位符重置到左上角要好。感谢您，againI通过以下方式修改数据绑定处理程序，获得了您在示例中所做的工作：私有gridDataBoundHandler（e:kendo.ui.GridDataBoundEvent）{if（this.thisGrid&&this.currentCell）{setTimeout（（（）=>{//this.thisGrid.editCell（this.currentCell）；this.thisGrid.current（this.currentCell）；}）.bind（this），10）；}}}关于它为什么会以这种方式工作的任何线索？可能还有一些其他排队的事件正在“撤消”您正在执行的操作（并且这些事件的顺序可能取决于浏览器）和setTimeout（）为其他活动增加了一个在您完成任务之前先完成的机会。谢谢！我真的一点也不明白