Hi there,
Is there a way to make the grid/gridpro open up the in-line editor on a single click as opposed to a double click? The double click is unnatural for most users and is confusing, people expect it to work very similar to a spreadsheet where you can just click on a cell and start editing.
I tried to enable this functionality by hooking the edit to the ItemClickListener event but it doesn’t work:
grid.addItemClickListener(l -> {
System.out.println("Item clicked for "+l.getItem().toString());
grid.getEditor().editItem(l.getItem());
});
There are two problems with the above:
- The click is not detected if you click on a value in the grid since it seems to be getting passed to the text/label of the display grid (i.e., when the editor is closed). The debug message is only shown if the click is on an empty part of the grid.
- The editor does not come up even when the single click event is triggered. I get the debug message in the console but the grid does not change.
Am I missing something with the above? I am using a grid with only custom columns, could this be the reason?
The following sample code shows the issue and might help determine how to fix it (based on the to-do example):
package com.vaadin.example;
import com.vaadin.flow.component.button.*;
import com.vaadin.flow.component.gridpro.*;
import com.vaadin.flow.component.notification.*;
import com.vaadin.flow.component.orderedlayout.*;
import com.vaadin.flow.component.textfield.*;
import com.vaadin.flow.data.provider.*;
import com.vaadin.flow.data.value.*;
import com.vaadin.flow.router.*;
import java.util.*;
@Route("")
public class MainView extends VerticalLayout {
static long lastid = 0l;
public MainView() {
Button button = new Button("Click me",
event -> Notification.show("Clicked 1!"));
add(button);
GridPro<DataRow> grid = new GridPro();
List<DataRow> dataList = getData();
ListDataProvider<DataRow> dataProvider = new ListDataProvider<>(dataList);
grid.setDataProvider(dataProvider);
TextField editor = new TextField();
editor.setValueChangeMode(ValueChangeMode.EAGER);
grid.addColumn(item -> item.get("Col1").toString()).setHeader("Col1");
grid.addEditColumn(row -> {
Object o = row.get("Col2");
System.out.println("Getter is getting value "+o.toString());
return o;
})
.custom(editor, (row, v) -> {
row.put("Col2", v);
System.out.println("Assigned value of "+v);
System.out.println("Editor has value "+editor.getValue());
dataProvider.refreshItem(row);
dataProvider.refreshAll();
})
.setHeader("Col2");
grid.addComponentColumn(item -> {
NumberField c = new NumberField();
c.setValue((Double)item.get("Number"));
return c;
}).setHeader("Number");
TextField col1 = new TextField();
add(new Button("Add", e -> {
dataList.add(getAnotherRow("","", 0d));
dataProvider.refreshAll();
}));
add(new Button("Dump", e -> {
dataList.forEach(r -> {
System.out.print("Col1:"+r.get("Col1")+" ");
System.out.print("Col2:"+r.get("Col2")+" ");
System.out.print("Number:"+r.get("Number"));
System.out.println("");
System.out.println("Editor has value "+editor.getValue());
});
}));
add(grid);
grid.addItemClickListener(l -> {
System.out.println("Item clicked for "+l.getItem().toString());
grid.getEditor().editItem(l.getItem());
});
}
public List<DataRow> getData() {
ArrayList<DataRow> db = new ArrayList();
db.add(getAnotherRow("abc", "def", 13d));
db.add(getAnotherRow("XYZ", "sdifj", 1231d));
db.add(getAnotherRow("sfdj", "ofdkgp", 698d));
return db;
}
public DataRow getAnotherRow(String c1, String c2, Double i) {
DataRow row = new DataRow();
row.put("Col1", c1);
row.put("Col2", c2);
row.put("Number", i);
return row;
}
public class DataRow extends HashMap<String, Object> {
Long id;
public Long getId() {
if(id == null)
id = ++lastid;
return id;
}
}
}