Vaadin's Grid editing capabilities

This time I'd like to talk a little bit about something that I believe is one of the most powerful capabilities of Vaadin Grid component: the editing feature. The default view of the component is a read-only view, of the tabular data loaded in the component. But if you enable the editor, you can visually edit the grid's cells and change the data that the grid is holding in the server's memory. Let's dig in some difficulties to use this feature and how to overcome them.

Inline editing

If you look at the demo sampler application, you'll see that the Item Editor, is like a little form that opens whenever you double click a row. That's different than the previous component in older Vaadin versions (Table). With Table, when you double click on it, the entire row turn into read/write mode, without changing the row into a "mini form" as grid does now. Of course this behavior is configurable, you can disable it just by calling setBuffered(false).

Despite of being somehow more visual, this new conduct, could be an undesirable behavior for enterprise applications that happens to use the keyboard a lot, and not depending so much on the mouse, to handle the table or grid.

If your users desire that kind of grid management, then the Grid Fast Navigation Addon is for you. It uses the Component Extension feature, to give the grid a new look, that makes the editing much more easier, and transforms it in a sort of excel style facility.

Grid Fast Navigation Addon in action

Components

Another thing that prevented some developers to stop using Table and starting to use grid, was that you couldn't use a standard component inside a cell of a Grid. If you wanted to, for example, use checkboxes inside a cell, you had to create a special class, called "renderer", that should handle the server and the client side of that cell.

Luckily there are some addons that may help you with that task. The one that stands out is the Grid renderes collection (it exists for Vaadin 7 and 8 versions). It provides a lot of components that let you handle select, checkbox, images, etc.

In the last version of Vaadin, one of the most interesting features, is a new Renderer, that adds the capability to render a Vaadin component inside a cell of a grid. You can see a preview in the sampler application.

If you are using Vaadin 7, although, you could use a experimental version of that feature, installing the Component Renderer Addon.
Happy coding!