Blog

Community Answer: Clickable images in Grid components

By  
Alejandro Duarte
Alejandro Duarte
·
On Jan 5, 2018 7:21:00 AM
·

I learned something new while investigating the problem described in this question on stackoverflow.com:

It turns out, you can add click listeners not only to ButtonRenderers but to ImageRenderers as well. They both extend the ClickableRenderer class, as you can see if you inspect the class hierarchy for the Renderer interface:

So, when you render an image in a Grid’s cell, you can make the image clickable by adding a ClickListener to it:

ImageRenderer<Integer> renderer = new ImageRenderer<>();
renderer.addClickListener(e -> ...);

And of course, you can make the rest of the area in the cell clickable as well, by using an ItemClickListener:

grid.addItemClickListener(e -> {
       … check e.getColumn() and add some logic ...
});

Here’s a video that shows how to use these listeners in practice:

Stay tuned and see you next time with another community inspired answer!

Alejandro Duarte
Alejandro Duarte
Software Engineer and Developer Relations Manager at Vaadin Ltd. Author of Practical Vaadin (Apress), Data-Centric Applications with Vaadin 8 (Packt), and Vaadin 7 UI Design by Example (Packt). Passionate about software development with Java and open-source technologies. Contact him on Twitter @alejandro_du or through his personal blog at www.programmingbrain.com.
Other posts by Alejandro Duarte