Vaadin GridPro：EditColumn 选择中的动态选项

Question

我想让GridPro的EditColumn中的select的选项根据当前编辑的项目动态设置。

内置的选择类型不支持这种情况，因为我们只能传递静态选项列表，例如

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

使用自定义编辑器组件，我可以实现动态选项，如下所示：

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();
});

但是这个解决方案的问题是，在

listDataView.refreshAll()

完成之后，该项目的初始值不再绑定到选择组件，这意味着选择最初总是空的，即使当前项目有一个值.

有什么想法可以解决这个问题吗？

Answer 1

所以看起来您想使用 ComboBox 而不是 Select，因为当您将其设置为允许新项目时，ComboBox 可以像自动完成字段一样使用。 GridPro 允许使用自定义字段

    // 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");

您还可以将其添加到您的类中以使其看起来更好（只需创建一个空行的empty.css文件）

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