Grid focus and keyboard navigation (Demo included)

Suite and Optimus Suite 5
#1

Hi, in the included example there’s a grid that is populated from an XML file.

There is a text field for which the following jQuery event is declared:

$('#filtro_nombre').keyup(function(event){
	if(event.which == 13){
		grid_productos.selectRow(0);
	}
});

Which means I want to focus the first row in the Grid on ENTER.

When ENTER has been pressed the first row of the grid is selected, but the focus is still on the text field, so keyboard navigation doesn’t work. I would have to click the grid with the mouse to give the focus to the grid and then keyboard navigation will work.

I’ve also tried with selectCell() without success.

I need the keyboard navigation to work after giving focus to the grid.

Thanks
dhtmlx_problem_demo.zip (731 KB)

#2

Not sure if support has a better answer… I wanted to ask if you’ve tried catching onkeydown instead of onkeyup?

If you catch onkeydown and then in the event handler do selectRow() or selectRowById() and then cancel event. Also you might need to add grid.setActive().

docs.dhtmlx.com/doku.php?id=dhtm … _selectrow
docs.dhtmlx.com/doku.php?id=dhtm … ectrowbyid

#3

Thank you for taking the time to answer.

I tried what you recommended but it didn’t work, the behavior remained. Then I had some sort of epiphany and did the following and now it works. All that was needed was to force the focus out of the field before giving it to the grid.

$('#filtro_nombre').keyup(function(event){
	if(event.which == 13){
		$(this).blur();
		grid_productos.selectRow(0);
	}
});