Print Page - datagrid-cellediting: keyboard navigation [SOLVED]

Title: datagrid-cellediting: keyboard navigation [SOLVED]
Post by: korenanzo on March 11, 2016, 09:18:21 AM

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

Title: Re: datagrid-cellediting: keyboard navigation
Post by: stworthy on March 11, 2016, 07:44:13 PM

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

Title: Re: datagrid-cellediting: keyboard navigation
Post by: korenanzo on March 14, 2016, 01:34:08 AM

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?

Title: Re: datagrid-cellediting: keyboard navigation
Post by: stworthy on March 14, 2016, 02:13:55 AM

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');

Title: Re: datagrid-cellediting: keyboard navigation
Post by: korenanzo on March 14, 2016, 02:26:06 AM

Yesss!

Got it!

Title: Re: datagrid-cellediting: keyboard navigation [SOLVED]
Post by: korenanzo on March 16, 2016, 03:40:32 AM

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'));

                    }

Title: Re: datagrid-cellediting: keyboard navigation [SOLVED]
Post by: stworthy on March 16, 2016, 08:25:55 AM

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;
}

Title: Re: datagrid-cellediting: keyboard navigation [SOLVED]
Post by: korenanzo on March 16, 2016, 08:33:05 AM

EXCELLENT ! 8) 8) 8) 8)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: korenanzo on March 11, 2016, 09:18:21 AM