Question

我使用了带有angularJS 1.5的kendo-ui，我有一个简单的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"
            ],
            [...]

网格工作正常，读取，创建，更新，销毁的行为与预期一致。我的问题是每当我更改网格单元格中的值并按Enter键时，我想要键盘导航＆＃34;占位符＆＃34; （网格具有navigatable：true）保留在已编辑的单元格上，但它恰好被移动到左上角单元格。仅当dataSource的autoSync设置为true时才会发生此行为。我也尝试过设置＆＃34;当前的单元格通过＆＃34; .current＆＃34;网格api的方法，但它似乎不起作用：

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

有什么建议吗？

提前致谢！

---编辑---

我在评论中发布/粘贴的代码绝对不可读，所以我在这里重复代码：

为了使您的解决方案有效，我必须以这种方式修改我的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

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

因此，我会使用网格保存事件，在您进行编辑后触发，并通过输入，制表符，鼠标关闭等“提交”更改

其次，e.sender.current（）包括当前识别信息，如“grid_active_cell”和“k-state-focused”和“k-dirty-cell”等。当你进入dataSource更改事件时，单元格实际上已经丢失了所有这些装饰，而你的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 + ")";
}

然后在网格DATABOUND事件中（因为dataSource更改事件仍然跟着将单元格焦点更改为左上角的事件，但grid.dataBound更进一步在链中并且似乎更好地工作）：

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

演示（基于剑道网格演示，因为我没有全班，因此可变更改）：http://dojo.telerik.com/@Stephen/OjAsU

请注意，此解决方案（不是我的实现，但一般来说是您的技术）会破坏单元格之间的标签，即Tabbing将提交编辑，但dataSource change事件将始终将焦点重新放回刚刚编辑的单元格上移动到选项卡式单元格。这打破了用户对标签的期望。因此，您应该考虑仅尝试捕获回车键，而不是依赖于网格事件（无论选项卡还是输入，都会触发）。

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

1 个答案: