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.

[code]
/**

  • 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.

*/
@SuppressWarnings(“serial”)
@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) {
    super(caption);
    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});
    firstGridCell.dispatchEvent(evt);
}

And this gets invoked as follows

    private static final String GRID_ID = "weighinGrid";
    public WeighInView() {
        //...
        grid.setId(GRID_ID);
        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
Editor
API should have an
edit
method. For now it is only row index based, there’s a ticket about bean based edit methods.

The
getEditedItem
and
Header/Footer
visibility methods indeed are missing, I’m making a fix for those now.

//Teemu

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 https://github.com/vaadin/framework/pull/9706

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