datagrid-cellediting: keyboard navigation [SOLVED]

[korenanzo]

Hi,

I am using datagrid-cellediting.

I need to navigate across the cells using the arrow (up and down)  keys while in editing mode: is it possible?

How?

Thanks,
RIc

[stworthy]

You can't navigate to other cells by keyboard before finish the editing.

[korenanzo]

I've already extended the editors (  $.fn.datagrid.defaults.editors.textbox ) for other reasons;
maybe it is possible to call the navHandler functions from inside the keypress events of editors?

[stworthy]

The alternative solution is to navigate the editing cell up/down by watching the 'keydown' event on the inputing box. Please refer to the code below:

Code:

$('#dg').datagrid({
	data: data,
	onCellEdit: function(index,field){
		var dg = $(this);
		var input = dg.datagrid('input', {index:index,field:field});
		input.bind('keydown', function(e){
			if (e.keyCode == 38 && index>0){	// up
				dg.datagrid('endEdit', index);
				dg.datagrid('editCell', {
					index: index-1,
					field: field
				});
			} else if (e.keyCode == 40 && index<dg.datagrid('getRows').length-1){	// down
				dg.datagrid('endEdit', index);
				dg.datagrid('editCell', {
					index: index+1,
					field: field
				});
			}
		})
	}
}).datagrid('enableCellEditing');

[korenanzo]

Yesss!

Got it!

[korenanzo]

I'd like to manage alse the enter key in this way: in edit cell mode, when you press ENTER ti'd like to end the edit and start the edit in te next (right) cell.

I added this, but id does not work: the End edit is ok, but the next cell is not selected ,nor edited.

Code:

     else if(e.keyCode == 13 ) { 
                        dg.datagrid('endEdit', index);

                        dg.datagrid('gotoCell','right');
                        dg.datagrid('editCell',dg.datagrid('cell'));

                    }
 

[stworthy]

Please try this code instead.

Code:

else if (e.keyCode == 13){
	dg.datagrid('endEdit', index);
	dg.datagrid('gotoCell', {index:index,field:field});
	dg.datagrid('gotoCell', 'right');
	dg.datagrid('editCell',dg.datagrid('cell'));
	return false;
}

[korenanzo]

EXCELLENT !