Vaadin 8: Enter Grid in editable state; edit an item without double-clickin

I have a page whose whole purpose is to edit a grid. It is meaningless to ask people to double-click on a line, especially since everything is in immediate mode. Is there a way to put the grid in editable state, even if it’s row 1 that’s editable ?
Even better, is it possible to programmatically select a row and make it the focus of edition ? I guess I’m being lazy and have not actually looked under the hood in the source code for how it’s done…

Answering myself. Here is a gross workaround to enter editing mode without double-clicking. Double clicking is very hard for older people, by the way. The hack uses javascript. Ugh.


  • Gross workaround to avoid users guessing that double-click is needed to enter the grid editing mode.
  • We create a button to enter editing mode by simulating the doubleclick in JavaScript.

@JavaScript({ “GridEditingButton.js” })
public class GridEditingButton extends Button {

 * @param caption caption to set on button
 * @param gridId id of the grid that we wish to switch (set with grid.setId(gridId))
public GridEditingButton(String caption, String gridId) {
    String script = "simulateDblClick('" + gridId + "');";
    addClickListener(e -> com.vaadin.ui.JavaScript.getCurrent().execute(script));

[/code]And here is the GridEditingButton.js

 * Workaround for making a grid switch to editable mode without the user having
 * to double click in the table.

function simulateDblClick(elementId) {
    // use css selector to locate the first grid cell of the targeted grid
    var selector = "div#" + elementId + " div > table > tbody > tr.v-grid-row-has-data > td.v-grid-cell";
    var firstGridCell = document.querySelector(selector);
    // trigger a double-click event to toggle editing mode
    var evt = new MouseEvent("dblclick", {bubbles : true, cancelable : true, view : window});

And this gets invoked as follows

    private static final String GRID_ID = "weighinGrid";
    public WeighInView() {
        GridEditingButton editButton = new GridEditingButton("Edit", GRID_ID);

Apparently some of the useful things about the Grid did not make their way from Vaadin 7 to 8 :frowning:

Below are only a few of those

  • editItem()
  • getEditedItemId()
  • setHeaderVisible()

I do hope we see them implemented again ASAP

I gave up on the in-place edit. Too difficult to figure out when/how to call my persistence method.

Hi and sorry for the late response.

The Grid
API should have an
method. For now it is only row index based, there’s a ticket about bean based edit methods.

visibility methods indeed are missing, I’m making a fix for those now.


And let’s take that back immediately. I though we had an edit method but that seems to be missing as well. Will make a fix for that too.

The missing header/footer visibility is here

Instead of waiting for getEditedItem method you can use GridFastNavigation add-on fastNavigation.addEditorOpenListener(event -> event.getRow()).