Grid keyboard navigation code sample

5 posts, 0 answers
  1. Timothy
    Timothy avatar
    41 posts
    Member since:
    Aug 2011

    Posted 25 Oct 2012 Link to this post

    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);
    };
    }();
  2. Bence
    Bence avatar
    6 posts
    Member since:
    Nov 2013

    Posted 10 Dec 2013 Link to this post

    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.
  3. Timothy
    Timothy avatar
    41 posts
    Member since:
    Aug 2011

    Posted 15 Dec 2013 Link to this post

    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.
  4. Bence
    Bence avatar
    6 posts
    Member since:
    Nov 2013

    Posted 15 Dec 2013 Link to this post

    I'm using the latest 2013 Q3 rev.
  5. Timothy
    Timothy avatar
    41 posts
    Member since:
    Aug 2011

    Posted 15 Dec 2013 Link to this post

    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.
Back to Top