Grid keyboard navigation code sample

[Timothy]

This seems to work for me although Chrome and Firefox don't seem to scroll the grid to show the latest row when using virtual scrolling. IE10 on the other hand does work.

var ps_Fn = function () {
   var rIndex = 0,
      cIndex = 0,
      FOCUSED = "k-state-focused";
   return {
grid_key: function (gridId, AfterNewRow) {
   var grid = $(gridId).getKendoGrid();
   $(gridId).on('keydown', function (e) {
      if (e.keyCode == 9 || e.keyCode == 38 || e.keyCode == 40) {
         var curRow = grid.select();
         if (!curRow.length)
            return;
         var cell = grid.current()[0],
            newRow,
            model = grid._modelForContainer(cell),
            field = grid.columns[cIndex].field;
         cIndex = cell.cellIndex;
         if (e.keyCode == 9) {
            if (e.shiftKey) {
               if (cIndex == curRow[0].cells.length -1) {
                  newRow = curRow.prev();
               }
               else
                  return;
            }
            else {
               if (cIndex != 0)
                  return;
               newRow = curRow.next();
            }
         }
         else if (grid._editContainer && model.editable(field)) { //in edit mode don't want to muck around with combos, etc.
            return;
         }
         else if (e.keyCode == 38) {
            newRow = curRow.prev();
            while (newRow && newRow.length && newRow[0].cells.length != curRow[0].cells.length) { //take care of grouping
               newRow = newRow.prev();
            }
         }
         else if (e.keyCode == 40) {
            newRow = curRow.next();
            while (newRow && newRow.length && newRow[0].cells.length != curRow[0].cells.length) { //take care of grouping
               newRow = newRow.next();
            }
         }
         if (!newRow.length)
            return;
         rIndex = newRow[0].rowIndex,
         ps_Fn.grid_setcurrent(grid, AfterNewRow);
      }
   });
},
grid_savecurrent: function(grid) {
   var curRow = grid.select();
   if (!curRow.length)
      return;
   var cell = grid.current()[0];
   cIndex = cell.cellIndex,
   rIndex = curRow[0].rowIndex;
},
grid_setcurrent: function (grid, AfterNewRow) {
   var curRow = grid.tbody.find(">tr:eq(" + rIndex + ")");
   grid.select(curRow);
   var newCell = curRow.find(">td:eq(" + cIndex + ")");
   if (grid._editContainer) {
      grid.closeCell();
   }
   if (AfterNewRow) {
      var dataItem = grid.dataItem(curRow);
      if (dataItem)
         AfterNewRow(dataItem);
   }
   grid.current(newCell);
   newCell.focus();
   newCell.addClass(FOCUSED);
};
}();

[Bence]

Hi Timothy!

You posted this seems-to-be-awesome code a long time ago, and this is exactly what i need right now, but i have some problem while implementing it.
I'm new with kendo, and i'm not really understand half of your code, so if you will be kind enough to give me a point by point instruction
on how to implement it, i'd be very thankful.

[Timothy]

Hi Bence,
I'll review the code as it is now and check the issues you have mentioned. Time has marched on since I posted this and the code has changed quite a lot. Could you let me know what version of Kendo you are using as at present I am transitioning websites from the 2013 Q2 SP1 version to 2013 Q3 version. Sorry for the lateness of reply.

[Bence]

I'm using the latest 2013 Q3 rev.

[Timothy]

Hi Bence,
Ok just checked the code as it is now in 2013 Q3 and it works in Chrome (31.0.1650.63 m), Firefox (26.0) and IE11. There are some issues when navigating with cells that are only visible when you have to scroll to the right to see them but in these cases I advise the user to drag and drop them to the visible part of the grid if you understand what I am saying.

The code is now written using Typescript 0.95 but I dare say I could grab the relevant bits from the generated JavaScript and is part of my own library of Kendo helper functions. Do you want the code in Typescript or JavaScript??

I have a lunch time meeting so will be leaving the office shortly - but will keep in contact and try to help you out. How long have you been working with Kendo?? I must say I found the learning curve really steep coming from a C# and Web forms background. However the effort was worth it and every new version of Kendo gets better and better.