Immediately select the row with the arrow in the Vaadin 7 Grid

Question

In Vaadin 7.5.3, the Grid responds to the user by pressing the up (↑) or down (↓) arrow keys, moving the selected field around one cell. If the user then performs the second action by pressing the SpaceBar key, the row becomes highlighted.

I am confused by this behavior. I would expect that each hit of the arrow key immediately selects the next line.

Is there a way to change the behavior of the Grid to directly select the next row without requiring a second user gesture?

Answer 1

For reference, the relevant forum topic is vaadin about navigating the arrow in the grid . Someone even posted a zip file with an example project.

I just tried this suggestion and it seems to work, except that now I get the "Ignore connector for non-existent connector" log messages.

The solution involves compiling your own widget, so it can be painful to customize if you haven't already.

In widgetset / client package:

@Connect(GridExtension.class) public class GridExtensionConnector extends AbstractExtensionConnector { @Override protected void extend(ServerConnector target) { GridConnector gridConnector = (GridConnector) target; final Grid<JsonObject> grid = gridConnector.getWidget(); grid.addDomHandler(new KeyDownHandler() { @Override public void onKeyDown(KeyDownEvent event) { if(event.getNativeKeyCode() == 40) { selectFocused(); } else if(event.getNativeKeyCode() == 38) { selectFocused(); } } }, KeyDownEvent.getType()); } public static void selectFocused() { Timer timer = new Timer() { @Override public void run() { execClick(); } }; timer.schedule(10); } public static native void execClick() /*-{ // only click if focused row is not already selected if(!$wnd.$(".v-grid-body .v-grid-row-focused .v-grid-row-selected").length) { $wnd.$(".v-grid-body .v-grid-cell-focused").click(); } }-*/; } 

Somewhere else:

 @JavaScript({ "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" }) public class GridExtension extends AbstractExtension { public void extend(Grid grid) { super.extend(grid); } } 

And use:

 new GridExtension().extend(grid); 

Please note that this solution only works for one grid per page. The vaadin forum section also contains a suggestion on how to make this work for pages with multiple grids on the same page, but it did not compile immediately for me, so I do not include it here.