Immediately select row by Arrow key in Vaadin 7 Grid

Question

In Vaadin 7.5.3, the Grid widget responds to the user pressing the Up (↑) or Down (↓) arrow keys by moving a highlight box around a single cell. If the user then takes a second action, pressing the SpaceBar key, the row becomes selection.

I am confused by this behavior. I would have expected each stroke of an Arrow key to immediately select the next row.

Is there some way to alter the Grid's behavior, to directly select the next row without requiring a second gesture by the user?

Fredkin

I don't think so. You can shutdown your server and notice that you can still navigate through Grid using keyboard - thus this functionality operates on a client side (javascript). – Unless

@Unless I do not understand your comment. I am asking if there is a way to make a keystroke and immediately select the next row (without a second keystroke). – Fredkin

On a tangent… The InlineDateField has a similar two-keystroke behavior. Right-Arrow produces a highlight box around the next date in the monthly calendar. To actually select that date, you must make a second keystroke. The curious part: The second keystroke is a RETURN key rather than SPACE key used by Grid. – Fredkin

Answer 1

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

I just tried that suggestion, and it seems to work, except that I now get "Ignoring connector request for no-existent connector" log messages.

The solution involves compiling your own widgetset, so that can be a pain to setup if you have not done so already.

In the 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 the usage:

new GridExtension().extend(grid);

Note that this solution only works for a single grid per page. The vaadin forum thread also contains a suggestion on how to make this work for pages with multiple grids on the same page, but it didn't immediately compile for me so I'm not including it here.

Ruhr

Answer 2

There is no built in feature for this in the framework. If you do not want to create extension for Grid yourself, you could use GridFastNavigation add-on which has row focus tracking and event listener for it. You can do programmatic selection of the row in that event.

Limp