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

Question

I'm using kendo-ui with angularJS 1.5 and I have a simple kendo-grid bound to a datasource with transport configured using functions as follows:

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

The grid options looks like this:

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

The grid works fine and the read, create, update, destroy behave as expected. My problem is that whenever I change a value in a grid's cell and hit enter, I would like to have keyboard navigation "placeholder" (the grid has navigatable: true) to remain on the edited cell, but it happens to be moved to the upper left corner cell. This behavior happens only when dataSource's autoSync is set to true. I've also tried to "set" the current cell via the ".current" method of the grid's api but it doesn't seem to work:

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

any suggestions ?

Thanks in advance !

--- edit ---

The code I posted/pasted in the comment is absolutely unreadable so I'm repeating the code here:

To have your solution work, I had to modify my dataBound handler this way.

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

without the timeout, the navigation placeholde was still resetting back to the upper left corner.

The Dread Pirate Stephen The Dread Pirate Stephen · Accepted Answer · 2016-11-21T14:30:55

First, I think the grid change event is the wrong event to attach to as it only fires when the user selects a row/cell with the mouse...it will not fire on tab events.

So, I would use the grid save event, which fires after you make an edit and "commit" the change through enter, tab, mouse off, etc.

Second, the e.sender.current() includes the current identifying information like "grid_active_cell" and "k-state-focused" and "k-dirty-cell", etc. By the time you get to the dataSource change event, the cell has actually lost all that decoration and your this.currentCell is essentially pointing at a non-existent selector. So, you need to grab a more "permanent" identifier.

So, using the grid save event:

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

And then in the grid DATABOUND event(as the dataSource change event is still followed by events that change the cell focus to the top-left, but grid.dataBound is further in the chain and seems to work better):

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

Demo(with variable changes as I do not have your whole class, based on a kendo grid demo): http://dojo.telerik.com/@Stephen/OjAsU

Note that this solution(not my implementation, but your technique in general) will break tabbing from cell to cell, i.e. tabbing will commit the edit but the dataSource change event will always put the focus back on the just-edited cell instead of moving to the tabbed-to cell. This breaks user expectation of what tab does. So, you should consider trying to capture the enter key press only instead of relying on the grid events(which fire regardless of tab or enter).

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

1 Answers