I have tried to modify the behavior of the InCell Edit Mode of kendo Grid. I mean i tried to navigate to cells using arrows but i have a problem in doing So.
This is my code:
$("#grid").keydown(function (e) {
debugger;
isEditStarted = true;
var totlaColumns = $($(" #grid td")[0]).nextAll().length + 1;
currentTD = $(" #grid td.k-edit-cell");
var indexx = $("#grid td").index($(" #grid td.k-edit-cell"));
//currentTDIndex = $(currentTD).parent().children().index($(currentTD)) + 1;
if (isEditStarted) {
var code = e.keyCode || e.which;
if (code === 37) {
//left Key
//var eventEnter = jQuery.Event("keypress");
//eventEnter.which = 18;
//eventEnter.keyCode = 18;
var x = "#" + $($(" #grid td")[$(" #grid td").index($(" #grid td.k-edit-cell"))]).find('input').attr('id');
var valuem = $(x).val();
var position = $(currentTD).prevAll("td").length + 1;
var length = $(currentTD).prevAll("td").length;
if (length > 1) {
debugger;
$("#grid tr td").removeClass('BorderHighlight');
$(x).val(valuem);
$($(currentTD).prevAll("td")[0]).click();
$($(currentTD).prevAll("td")[0].childNodes[0]).addClass('BorderHighlight');
}
}
else if (code === 38) {
currentTD = $(" #grid td.k-edit-cell");
var position = $(currentTD).prevAll("td").length + 1;
var currentRow = $(" #grid td.k-edit-cell").parent().parent().find('tr').index($(" #grid td.k-edit-cell").parent());
var newPosition = currentRow > -1 ? (currentRow - 1) * totlaColumns + position - 1 : 0;
$($(" #grid td")[newPosition]).click();
$($(" #grid td")[newPosition].childNodes[0]).addClass('BorderHighlight');
}
else if (code === 39) {
currentTD = $(" #grid td.k-edit-cell");
var length = $(currentTD).nextAll("td").length;
if (length > 1) {
$("#grid tr td").removeClass('BorderHighlight');
$($(currentTD).nextAll("td")[0]).click();
$($(currentTD).nextAll("td")[0].childNodes[0]).addClass('BorderHighlight');
}
}
else if (code === 40) {
currentTD = $(" #grid td.k-edit-cell");
var position = $(currentTD).prevAll("td").length + 1;
var currentRow = $(" #grid td.k-edit-cell").parent().parent().find('tr').index($(" #grid td.k-edit-cell").parent());
var newPosition = currentRow > -1 ? (currentRow + 1) * totlaColumns + position - 1 : 0;
$($(" #grid td")[newPosition]).click();
$($(" #grid td")[newPosition].childNodes[0]).addClass('BorderHighlight');
}
}
})
Here is the Demo for the functionality. I am able to navigate through out the grid through the keys but while doing so the grid values are not being saved. I mean when i click on an Empty cell and then enter a value and move to the next cell using right Arrow then the previous value is not being saved. But the value is being saved when we are clicking Enter or Tab or alt(twice) and then move to the next cell then the values are being saved
PS: Demo Link attached