CODEWITHSUNDEEP
jquerykendo-uikendo-grid
peterc
peterc

Reputation: 7843

Kendo Grid: How to set focus back to a grid cell after canceling current editing

I am looking at how to override some of the default keyboard commands for the Kendo grid. As in my example, and am intercepting the enter key, and want to move down a cell as done in the following block of code..

if (e.keyCode == 13) { // enter
      var current = grid.current();
      var index = current.index();
      var next = $(current).closest('tr').next('tr');                    

      var td = next.find('td:eq(' + index + ')');
      grid.closeCell();
      grid.current(td);  
      current = grid.current();
      grid.focus(current);
      //current.focus();
      return;
    }

It is very close to working. If I am in navigation mode before I hit enter then all still works fine. However, if I am in an edit mode (eg tab to a cell and then hit enter) , it does go down a cell and back to navigation mode, however I don't seem to have the correct focus. The left right arrow keys don't work, and up an down arrows seem to show focus is on the page, not within the grid.

I have tried calling the focus in various ways, but I just can't get it working. Any ideas what I am doing wrong here? Any help would be greatly appreciated!

Thanks in advance

Upvotes: 2

Views: 9802

Answers (1)

Lars Höppner
Lars Höppner

Reputation: 18402

You need to set focus on the table itself because the grid's keydown event handler is bound to the table:

scope.$on("kendoRendered", function (e) {
    var grid = scope.grid;
    var elem = $(grid.table);

    // attach keydown handler to the table
    var newHandler = function (e) {
        if (e.keyCode == 13) { // enter
            var current = grid.current();
            var index = current.index();
            var next = $(current).closest('tr').next('tr');

            grid.closeCell();
            var td = next.find('td:eq(' + index + ')');

            grid.current(td);
            $(td).closest("table").focus();
        }
    };

    $(elem).on("keydown", newHandler);
});

(demo)

Upvotes: 4

Related Questions