La cuadrícula de Kendo no guarda valores después de pasar a la siguiente celda
He tratado de modificar el comportamiento del modo de edición InCell de kendo Grid. Quiero decir, intenté navegar a las celdas usando flechas, pero tengo un problema al hacerlo.
Este es mi código:
$("#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');
}
}
})
Aquí está elManifestación por la funcionalidad. Puedo navegar a través de la cuadrícula a través de las teclas, pero al hacerlo, los valores de la cuadrícula no se guardan. Quiero decir que cuando hago clic en una celda vacía y luego ingreso un valor y me muevo a la siguiente celda usando la flecha derecha, entonces el valor anterior no se guarda. Pero el valor se guarda cuando hacemos clic en Enter o Tab o alt (dos veces) y luego pasamos a la siguiente celda, luego se guardan los valores
PD: Enlace de demostración adjunto