3

I'd like to know if it's possible to navigate through Vaadin grid or treegrid and select an item using only keyboard arrow keys? From what i've seen while testing the components, the default behavior seems to be either to move only to one specific cell in grid or to a specific row in treegrid. Selection can be achieved if the user presses spacebar. I've tried to add a shortcutListener to grid but it doesn't seem to work with arrow keys. And the grid scrollbar doesn't move with the selected item.

grid.addShortcutListener(new ShortcutListener("Down", KeyCode.ARROW_DOWN, null) {
    @Override
    public void handleAction(Object sender, Object target) {
        //..//
        selectedItem = dataSource.get(currentSelectedItemIndex);
        grid.select(selectedItem);
        grid.scrollTo(currentSelectedItemIndex); // this doesn't seem to do anything??
        //..//
    }
});

I guess my problem is that i don't know how to acquire event that moves selection to other cell/row. Here's an image to represent the problem which i'm facing. The item that has only blue border was selected using arrow keys. I'd like to select an item automatically when user presses arrow keys (Down or Up) without the spacebar. Image taken from here: https://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features

image

Edit1: I'm using latest version of Vaadin - 8.1.6.
Edit2: I tried to add couple of listeners to see if i could at least register the movement to the next/previous cell by using arrow up/down but without any luck. Here's a list of listeners i've tried:

  • addSelectionListener - only registers selection after spacebar press or mouse click. Not quite what i'm looking for.
  • addItemClickListener - only registers selection from mouse click.
  • addShortcutListener - registers pressed key but it doesn't work with arrows.

Is there any listener that could potentially help me with this issue?

James A
  • 137
  • 1
  • 1
  • 13

1 Answers1

1

The Grid component has basic keyboard navigation. If you need advanced options, like you have mentioned, for keyboard navigation, I would warmly recommend to test this add-on:

https://vaadin.com/directory/component/gridfastnavigation-add-on

Tatu Lund
  • 9,949
  • 1
  • 12
  • 26
  • So which listener should i use to register the movement (focus) to next cell? If i understood correctly, the demo application is able to detect this movement. Demo app isn't available from Vaadin 8 github link, so i tested it from here http://patrik.app.fi/GridFastNavigation-demo-0.2.0/ I'm guessing functionality should be the same. – James A Nov 22 '17 at 08:18
  • Version 0.2.0 is very old and there has been lot of improvements since then. If you are using Vaadin 8, check sources from here https://github.com/TatuLund/GridFastNavigation/tree/vaadin8 If you want to follow the focus, use the CellFocusListener and CellFocusEvent. There is JavaDocs in most API's in newer versions of the add-on. – Tatu Lund Nov 23 '17 at 09:17
  • And one more comment, the code repo github.com/TatuLund/GridFastNavigation/tree/vaadin8 includes test app you can run locally. Just do git clone and use it – Tatu Lund Nov 23 '17 at 09:50
  • Thank you very much. Is there anything similar to this add-on for treegrid tree as well? – James A Nov 27 '17 at 11:27