Search code examples
javagridvaadintreegridvaadin8

How to navigate through Vaadin grid and select an item using keyboard?

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?

Solution

  • 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