Vaadin Grid 默认显示所有项目详细信息

Question

我有一个带有像这样的 ComponentRenderer 设置的网格。我的目标是默认显示网格中所有项目的所有详细信息。

grid.setItems(dataProvider);
// this prevents other items from collapsing when one is clicked (being expanded)
grid.setDetailsVisibleOnClick(false);

// collapse/expand on click
grid.addItemClickListener(event -> grid.setDetailsVisible(event.getItem(), !grid.isDetailsVisible(event.getItem())));

grid.addComponentColumn((item) -> {
    HorizontalLayout layout = new HorizontalLayout();
    // ... configure and populate layout (omitted)
    
    // expand all details by default
    // doing this somehow causes the itemClickListener to fail... ("Child should have this element as a parent")
    if (!grid.isDetailsVisible(item)) {
        grid.setDetailsVisible(item, true);
    }

    return layout;
});

grid.setItemDetailsRenderer(new ComponentRenderer<>(() -> {
    VerticalLayout layout = new VerticalLayout();
    layout.setPadding(false);
    layout.setMargin(false);
    return layout;
}, (layout, item) -> {
    List<Details> details = detailService.listDetails(this.userId, item);
    populateDetails(layout, details);
}));

我通过在

setItemDetailsVisible

中使用

addComponentColumn

来实现这一点，但是，这会导致 ItemClickListener 失败并出现异常，如代码中的注释所示。 为什么会发生这种情况？如何解决？对于这个问题是否有一种开箱即用的不同方法？

我正在使用 Vaadin 23.3.5。

这是异常的 StackTrace。

java.lang.IllegalArgumentException: Child should have this element as a parent
    at com.vaadin.flow.dom.Node.ensureChildHasParent(Node.java:589)
    at com.vaadin.flow.dom.Node.removeChild(Node.java:482)
    at com.vaadin.flow.dom.Node.removeChild(Node.java:466)
    at com.vaadin.flow.data.provider.AbstractComponentDataGenerator.refreshData(AbstractComponentDataGenerator.java:53)
    at com.vaadin.flow.data.provider.CompositeDataGenerator.lambda$refreshData$2(CompositeDataGenerator.java:62)
    at java.base/java.lang.Iterable.forEach(Iterable.java:75)
    at com.vaadin.flow.data.provider.CompositeDataGenerator.refreshData(CompositeDataGenerator.java:62)
    at com.vaadin.flow.data.provider.DataCommunicator.refresh(DataCommunicator.java:391)
    at com.vaadin.flow.component.grid.Grid$AbstractGridExtension.refresh(Grid.java:1136)
    at com.vaadin.flow.component.grid.Grid$DetailsManager.setDetailsVisible(Grid.java:1204)
    at com.vaadin.flow.component.grid.Grid.setDetailsVisible(Grid.java:3143)
    at my.comp.project.gui.MyView.lambda$initGrid$9b1b5227$1(MyView.java:190)

第 190 行是 ItemClickListener

Answer 1

推测：这听起来像是执行顺序的问题。当 ComponentRenderer 执行时，您尝试展开

item

的网格行。我猜测

item

的行（或所述行的详细信息）尚未附加到父网格，因此此时尝试扩展详细信息执行得太早了。

Answer 2

由于我找不到此问题的适当解决方案，因此我决定选择解决方法。 我没有使用

setItemDetailsRenderer

，而是在组件列内部渲染

Details

的实例。

grid.addComponentColumn(item -> {
    HorizontalLayout header = new HorizontalLayout();
    // configure and populate

    VerticalLayout content = new VerticalLayout();
    // configure and populate

    Details details = new Details(header, content);
    details.addClassName("full-width");
    details.setOpened(true);
    return details;
});

为了让详细信息摘要跨越整个列宽，我添加了类名

summary-width-full

并将此样式添加到

vaadin-details.css

:host(.full-width) [part="summary-content"] {
    width: 100%;
}