javascript - kendo grid - navigate and enter cells with arrow keys -


how can achieve following, when arrow keys pressed should go curresponding cell , enter cell user can start typing right away without having enter cell first, , if arrow keys pressed in numeric cell should ignore default behavior of adding or subtracting numbers , instead go upper or lower cell in next row.

edit:

here code came works , skip cell or two, advice?

$(document).ready(function () {     var grid = $("#grid").data("kendogrid");     $(grid.tbody).on("keydown", "td",function (e) {         if (e.keycode >= 37 && e.keycode <= 40) {             var row = $(this).closest("tr");             var rowindex = $("tr", grid.tbody).index(row);             var colindex = $("td", row).index(this);             grid.closecell();              if (e.keycode == 37) {//left                 colindex--;             }             if (e.keycode == 38) {//up             rowindex--;             }             if (e.keycode == 39) {//right                 colindex++             }             if (e.keycode == 40) {//down                 rowindex++             }             grid.editcell($("#grid tr:eq(" + rowindex + ") td:eq(" + colindex + ")"));         }     }); }); 

you have silly mistake in code prevents work. know, kendo's grid works 2 tables togheter, 1 header, other body. if specify in selector body's table tbody element(the header table doesn't haves element), work:

grid.editcell($("#grid tbody tr:eq(" + rowindex + ") td:eq(" + colindex + ")"));                        ^^^^^ // add here 'tbody' element 

demo.

also, have added little logic @ end user able loop through rows , cell while navigating.

it such simple feature should native in widget, imho.


Comments