how to... vaadin auto select activeitem grid.select

Literate1 · May 5, 2017, 7:30am

When the app starts, how to:

// Set focus to
grid.focus();

then make that selection ACTIVE automatically without having to click on the grid row to achieve input focus
which updates the data population into the form?

I have:

Book of Vaadin 8
Duarte, Alejandro. Vaadin 7 UI Design By Example

Please, any additional Vaadin books that would instruct HOW to accomplish:

on start/on run – set FOCUS and make component ACTIVE
grid keyup / keydown – set FOCUS and make grid row ACTIVE
change layout of FORM / GRID to be an exact placement (currently seems to be 50/50 of the width)

please see video notes below.

Any suggestions greatly appreciated.

VIDEO NOTES

https://www.useloom.com/share/eee1d921d0b1456cba9f2593753f0cf4

UI code:

package com.dataSQL;

import com.vaadin.annotations.Theme;
import com.vaadin.data.Binder;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.*;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

@Theme("valo")
@SpringUI
public class inventoryui extends UI {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    @Autowired
    private basicservice service;
    private basicmodel inventory;
    private Binder<basicmodel> binder = new Binder<>(basicmodel.class);
    private Grid<basicmodel> grid = new Grid<basicmodel>(basicmodel.class);
    private TextField id = new TextField("id");
    private TextField short_desc = new TextField("short_desc");
    private TextField long_desc = new TextField("long_desc");
    private TextField department = new TextField("department");
    private TextField category = new TextField("category");
    private TextField price = new TextField("price");
    private Button save = new Button("Save", e -> savebasicmodel());

    @Override
    protected void init(VaadinRequest request) {

        VerticalLayout form = new VerticalLayout(id, short_desc, long_desc, department, category, price, save);
        // form.setCaption("INVENTORY");

        updateGrid();
        // grid.setCaption("INVENTORY");
        grid.setSizeFull();
        grid.setColumns("id", "short_desc", "long_desc", "department", "category", "price");
        grid.addSelectionListener(e -> updateForm());

        binder.bindInstanceFields(this);

        HorizontalLayout layout = new HorizontalLayout(form, grid);
        grid.setSizeFull();
        layout.setSizeFull();
        setContent(layout);

        // Set focus to
        grid.focus();

    }

    private void updateGrid() {
        List<basicmodel> inventorys = service.findAll();
        grid.setItems(inventorys);
        setFormVisible(true);
    }

    private void updateForm() {
        if (grid.asSingleSelect().isEmpty()) {
            setFormVisible(false);
        } else {
            inventory = grid.asSingleSelect().getValue();
            binder.setBean(inventory);
            setFormVisible(true);
        }
    }

    private void setFormVisible(boolean visible) {
        id.setVisible(visible);
        short_desc.setVisible(visible);
        long_desc.setVisible(visible);
        department.setVisible(visible);
        category.setVisible(visible);
        price.setVisible(visible);
        save.setVisible(visible);
    }

    private void savebasicmodel() {
        service.update(inventory);
        updateGrid();
    }
}

Johannes10 · May 8, 2017, 7:45am

Put into updateGrid() method.
grid.select(inventorys.get(0));

Literate1 · May 8, 2017, 11:21am

Thank you. The first row is being selected, but the CLICK is not being implemented to cause the FORM to populate – focus and insertion point –

Would I need to simulate a CLICK – which I really hope no sendkeys type of bandaid would be necessary.

Please, there must be some way to make ACTIVE the grid component to populate the FORM.

As I want to also be able to KEYDOWN and the FORM data match the current selected GRID row.

Any suggestions greatly appreciated.

Johannes10 · May 8, 2017, 11:56am

updateGrid is called before the fields are bound. Move binder.bindInstanceFields(this) call before updateGrid

Literate1 · May 8, 2017, 12:10pm

Thank you, still, does not work.
Please view screenshot, the row is being selected but it does not have focus and is not active, as:

the FORM is not being populated
the keyup arrow does not function for navigation in the grid to match the grid row data to the form data

Any suggestions greatly appreciated. Thank you.

package com.dataSQL;

import com.vaadin.annotations.Theme;
import com.vaadin.data.Binder;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.*;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

@Theme("valo")
@SpringUI
public class inventoryui extends UI {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    @Autowired
    private basicservice service;
    private basicmodel inventory;
    private Binder<basicmodel> binder = new Binder<>(basicmodel.class);
    private Grid<basicmodel> grid = new Grid<basicmodel>(basicmodel.class);
    private TextField id = new TextField("id");
    private TextField short_desc = new TextField("short_desc");
    private TextField long_desc = new TextField("long_desc");
    private TextField department = new TextField("department");
    private TextField category = new TextField("category");
    private TextField price = new TextField("price");
    private Button save = new Button("Save", e -> savebasicmodel());

    @Override
    protected void init(VaadinRequest request) {

        VerticalLayout form = new VerticalLayout(id, short_desc, long_desc, department, category, price, save);

        binder.bindInstanceFields(this);
        updateGrid();

        grid.setColumns("id", "short_desc", "long_desc", "department", "category", "price");
        grid.addSelectionListener(e -> updateForm());

        HorizontalLayout layout = new HorizontalLayout(form, grid);
        form.setWidth("250px");
        grid.setWidth("1000px");
        setContent(layout);

        // Set focus to
        // grid.focus();

    }

    private void updateGrid() {
        List<basicmodel> inventorys = service.findAll();
        grid.setItems(inventorys);
        grid.select(inventorys.get(0));
        setFormVisible(true);
    }

    private void updateForm() {
        if (grid.asSingleSelect().isEmpty()) {
            setFormVisible(false);
        } else {
            inventory = grid.asSingleSelect().getValue();
            binder.setBean(inventory);
            setFormVisible(true);
        }
    }

    private void setFormVisible(boolean visible) {
        id.setVisible(visible);
        short_desc.setVisible(visible);
        long_desc.setVisible(visible);
        department.setVisible(visible);
        category.setVisible(visible);
        price.setVisible(visible);
        save.setVisible(visible);
    }

    private void savebasicmodel() {
        service.update(inventory);
        updateGrid();
    }
}

Johannes10 · May 8, 2017, 12:20pm

Sorry I forgot to add that you need to setup the selection listener before binding fields too.
Moving grid.addSelectionListener(e → updateForm()); before binder.bindInstanceFields(this);

Literate1 · May 8, 2017, 1:09pm

Thank you. That worked!

Q. Please, how would I set focus to that first row so that on

arrow key down
or
arrow key up

both the gird and form present the same data?

Q. Is it possible for a Vaadin Grid to INLINE EDIT the record?

Q. Is there another reference book that reviews the ORDER PLACEMENT of the code execution as you shared above?

I already have:
BOOK OF VAADIN 8 printed and in a binder
Learning Vaadin 7, Second Edition
Vaadin 7 UI Design By Example: Beginner’s Guide

Thank you. Found this: (is this now possible with Vaading 8 Grid – to navigate with arrow keys in the grid?)

https://github.com/vaadin/vaadin-grid/issues/487

related to:

[@Saulis]
Saulis changed the title from Keyboard navigation to Keyboard navigation - Cell Focus and Item Activation on Dec 22, 2016
[@Saulis]

Member
Saulis commented on Dec 22, 2016 • editedGoal for this ticket:

Add functionality to navigate (move focus) between cells
Add functionality to activate (which will select/deselect) the row containing the focused cell (space changes activeItem, shift + space selects)
Cell focus should also change when tapping on cells
Moving focus will also scroll the body so that focused cell is always visible
Header cells should somehow also be accessible with keyboard (check wai aria specs! and classic grid)

Johannes10 · May 8, 2017, 5:38pm

To comment on the order of code, that comes just from how code logically works. If the select is called before the selection event listener is added, the code for setting the bean for binder is not executed. Same goes for the binding itself, if select is called before the bindings have been made, the fields cannot receive a correct value.

The ticket discussion you found is vaadin-grid custom element for Polymer available in Vaadin Elements product not in the Vaadin Framework.

Literate1 · May 8, 2017, 5:43pm

Ok, thank you. I cannot understand why other grids like:
https://dhtmlx.com/docs/products/dhtmlxGrid/

have keymapping like:
https://dhtmlx.com/docs/products/dhtmlxGrid/samples/15_navigation/01_pro_keymap_access.html

and the same basic navigation is something that is not immediately capable.

Any suggestions greatly appreciated.