Grid - Get item from double-click

Flow
1

Hello guys,

We are having quite a bad time, starting projects with Vaadin10. We are missing really basic features. It doesn’t make me confident about our big projects migrations…

Last one I’m stucked on : we are trying a simple use-case, a grid from which we listen double-clicks to open detail in a dialog.
I can interpret double-click using event.getClickCount(), but cannot get the line/item i clicked on. The grid.getSelectedItems() returns 0 elements.
That’s normal : first click select the line, while second click unselect it.
Please tell me I don’t have to use the do-it-yourself method, recording last item i clicked on…

Regards
Sebastien

2

Hello Sebastien,

Indeed, there’s no high level API for listening to double clicks on items. But what you can do is to listen to double clicks on cells. You can do it by using a TemplateRenderer or a ComponentRenderer:

TemplateRenderer:

grid.addColumn(TemplateRenderer
    .of("<span on-dblclick='doubleClicked'>[[item.name]
]</span>")
    .withProperty("name", MyItem::getName)
    .withEventHandler("doubleClicked", item -> openDialog(item)));

ComponentRenderer:

grid.addColumn(item -> {
    Span myComponent = new Span(item.getName());
    myComponent.addClickListener(event -> {
        if (event.getClickCount() == 2) {
            openDialog(item);
        }
    });
    return myComponent;
});

Note: TemplateRenderer is way more efficient than ComponentRenderer in Grids with hundreds of rows.

By using this you don’t need to rely on selection. You can even use it without any selection at all (grid.setSelectionMode(SelectionMode.NONE);).

Another option would be to add a button in a cell that opens the Dialog, or even show the details of a given item by using a ItemDetailsRenderer. But of course that would change the layout of your Grid and the end UX.

– Gilberto

3

Looks like something changed in this 6 month, so just to keep it up to date, here is usage of ComponentRender :

    grid.addComponentColumn(item -> {
   	Span container = new Span(item.getKey());
   	container.addClickListener(event -> {
   		log.info("clicked {}", item.getKey());
   		if (((ClickEvent) event).getClickCount() == 2) {
   			log.info("double clicked {}", item.getKey());
   		}
   	});
   	return container;
   })

in previous example it was doing toString from Span component, so it didn’t work as expexted