navigate cells with left/right arrows

[Phil Cruz]

I have a editable grid and enableCellNavigation is true. I would like the arrow keys to behave similar to how it works in a spreadsheet where when you hit an arrow key you go to the next cell. With slickgrid, the up/down keys are fine, but the left/right keys don't go to the next cell. They move the cursor within the cell being edited. To go to the next/prev cell you have to tab/shift-tab. 

How can I make the left/right arrows go to the prev/next cell?

-Phil

[Kman]

Hi Phil,

I had the same problem but came up with this solution, until slickGrid
natively supports something similar..

Not sure if it will work for you but works really well in our
environment. It is only for the TextCellEditor but you could do
something similar to the others.
When someone is on the cell and the cursor is all the way left of the
text and left is pressed it moved to the left cell, when the cursor is
at the end of the text box and right is pressed focus moves to the
right. This allows the user to still move around with the cursor if
they want with left and right and still gives the feeling of excel.

Here is the code, I made a customTextCellEditor:

customTextCellEditor = function(args) {
var $input;
var defaultValue;
var scope = this;

this.init = function() {
$input = $("<INPUT type=text class='editor-text' />")
.appendTo(args.container)
.bind("keydown.nav", function(e) {
function doGetCaretPosition (ctrl) {
var CaretPos = 0; // IE Support
if (document.selection) {
ctrl.focus ();
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}

if(doGetCaretPosition(this) > 0){
if(e.keyCode === $.ui.keyCode.LEFT){
e.stopImmediatePropagation();
};
}
if(doGetCaretPosition(this) < $(this).val().length){
if (e.keyCode === $.ui.keyCode.RIGHT) {
e.stopImmediatePropagation();
}
}
})
.focus()
.select();
};

this.destroy = function() {
$input.remove();
};

this.focus = function() {
$input.focus();
};

this.getValue = function() {
return $input.val();
};

this.setValue = function(val) {
$input.val(val);
};

this.loadValue = function(item) {
defaultValue = item[args.column.field] || "";
$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};

this.serializeValue = function() {
return $input.val();
};

this.applyValue = function(item,state) {
item[args.column.field] = state;
};

this.isValueChanged = function() {
if(args.column.required && !args.column.isPrimaryColumn) return
true;
return (!($input.val() == "" && defaultValue == null)) &&
($input.val() != defaultValue);
};

this.validate = function() {
if (args.column.validator) {
var validationResults = args.column.validator($input.val());
if (!validationResults.valid)
return validationResults;
}

return {
valid: true,
msg: null
};
};

this.init();
};