Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Select row in Vaadin Grid through arrow key navigation immediately
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
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 :-/
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));
}
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: 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.