Vaadin GridPro: Dynamic Options in Select for EditColumn

Question

I want to have the options of the select in EditColumn of GridPro to be dynamically set according to the currently edited item.

The built-in select type does not support this case, since we can only pass a static list of options, e.g.

gridPro.addEditColumn(item -> item.getValue())
       .select((item, newValue) -> item.setValue(newValue), List.of("v1", "v2", "v3"));

With a custom editor component, I can achieve the dynamic options, like this:

var select = new Select<String>();
var listDataView = select.setItems(List.of("v1", "v2", "v3"));
listDataView.addFilter(v -> {
    // add filter logic according to currentItem
    return true;
});

gridPro.addEditColumn(item -> item.getValue())
       .custom(select, (item, newValue) -> item.setValue(newValue));

gridPro.addCellEditStartedListener(event -> {
    currentItem.set(event.getItem());
    listDataView.refreshAll();
});

But the problem with this solution is, that after the listDataView.refreshAll() is done, the initial value of the item is not anymore bound to the select-component, meaning the select is always empty initially, even if the current item has a value.

Any ideas how to solve this?

Answer 1

So it looks like you want to use ComboBox instead of Select as ComboBox can be used like autocomplete field when you set it to allow new items. GridPro allows to use custom fields

    // Use custom editor
    ComboBox<String> comboBox = new ComboBox<>();
    ComboBoxListDataView<String> dataView = comboBox.setItems("One", "Two",
            "Three");
    comboBox.setAllowCustomValue(true);
    comboBox.addCustomValueSetListener(e -> {
        String newValue = e.getDetail();
        dataView.addItem(newValue);
        comboBox.setValue(newValue);
    });
    comboBox.setWidth("100%");
    comboBox.addThemeName("grid-pro-editor");
    grid.addEditColumn(Bean::getValue)
            .custom(comboBox, (item, newValue) -> {
                item.setEmail(newValue);
            }).setHeader("Combo");

You can also add this to your class to make it look better (just create empty.css file with one empty line)

@CssImport(value = "./empty.css", themeFor = "vaadin-email-field", include = "lumo-grid-pro-editor")