Select row in Vaadin Grid through arrow key navigation immediately

General
1

Hi,

im trying to archieve the functionality in a Vaadin Grid to immediately select a row by arrow key navigation.
I couldnt find a possibility using ShortcutListener or FocusListener to react to the key events. By default the
Vaadin Grid focuses a Grid Cell when using arrow keys but not actually selects a row, this only works when hitting the
space bar afterwards. Is there a way to directly select the rows?

Best regards,
​August Gilg

2

I start doubting whether it was good choice to select Vaadin as framework, as I want feature you mentioned … and after 3 years and new Vaadin 14 it is still not resolved :-/

3

dirty solution I had to figured out:

final Grid that = this;

	this.addListener(KeyDownEvent.class, event -> {
		List<DTO> items = (List<DTO>) that.getDataProvider().fetch(new Query()).collect(Collectors.toList());
		if (items.size() > 0) {
			DTO selectedItem = that.getSelectedItems().stream().findFirst().orElse(null);

			if (selectedItem != null) {
				int i = items.indexOf(selectedItem);
				if (keyEquals(Key.ARROW_DOWN, event.getKey())) {
					that.select(items.get((i + 1) % items.size()));
				} else if (keyEquals(Key.ARROW_UP, event.getKey())) {
					that.select(items.get((i - 1 + items.size()) % items.size()));
				}
			} else {
				if (keyEquals(Key.ARROW_DOWN, event.getKey())) {
					that.select(items.get(0));
				} else if (keyEquals(Key.ARROW_UP, event.getKey())) {
					that.select(items.get(items.size() - 1));
				}
			}
		}
	});

private boolean keyEquals(Key key1, Key key2) {
	return key1.getKeys().get(0).equals(key2.getKeys().get(0));
}
4

Solved it by using a client-side Polymer component with Vaadin 14. To fire the selection event on the server-side you have to call grid.$server.select explicitly.

this.$.grid.addEventListener('keyup', event => {
    const item = this.$.grid.getEventContext(event).item;
    if (event.keyCode === 38 || event.keyCode === 40) { // arrow up || arrow down
        this.$.grid.selectedItems = [item]
; // single selection
        this.$.grid.$server.select(item.key);
    }
});
5

Alex Gassner:
Solved it by using a client-side Polymer component with Vaadin 14. To fire the selection event on the server-side you have to call grid.$server.select explicitly.

this.$.grid.addEventListener('keyup', event => {
    const item = this.$.grid.getEventContext(event).item;
    if (event.keyCode === 38 || event.keyCode === 40) { // arrow up || arrow down
        this.$.grid.selectedItems = [item]

; // single selection

    this.$.grid.$server.select(item.key);
}

});

@Alex Gassner can you explain how you manage your script and files with Vaadin 14 ?
I mean do you have to create a js file with your script for content and then import it into a class extending from the Vaadin Grid class? Does your js file have any imports? I’m struggle with Polymer built into Vaadin.