DataGrid details as dataGrid

I am not sure if a datagrid can be used as detail of another datagrid. I have used the following mechanism and it looks it runs for ages without any result! Is it the right approach?

public void initDetailGenerator() {
    productionPlanDataGrid.setDetailsGenerator(new DataGrid.DetailsGenerator<ProductionPlan>() {
        @Nullable
        @Override
        public Component getDetails(ProductionPlan entity) {

            VBoxLayout mainLayout = componentsFactory.createComponent(VBoxLayout.class);
            mainLayout.setWidth("100%");
            mainLayout.setMargin(true);

            HBoxLayout headerBox = componentsFactory.createComponent(HBoxLayout.class);
            headerBox.setWidth("100%");

            Label infoLabel = componentsFactory.createComponent(Label.class);
            infoLabel.setHtmlEnabled(true);
            infoLabel.setStyleName("h1");
            infoLabel.setValue("Order info:");

            DataGrid<PlanOrderOperations> detailGrid = componentsFactory.createComponent(DataGrid.class);

            planOrderOperationsesDs.setQuery("select e from erp$PlanOrderOperations e where e.operation.id = :custom$opsId");
            planOrderOperationsesDs.refresh(ParamsMap.of("opsId", entity.getOperation().getId()));
            detailGrid.setDatasource(planOrderOperationsesDs);

            headerBox.add(infoLabel);

            mainLayout.add(headerBox);
            mainLayout.add(detailGrid);
            return mainLayout;

        }
    });
}
1 Like

Hi,

Using DataGrid within details layout is not supported by Vaadin right now, see their issue Grid in details row fails to render correctly with certain settings. · Issue #7674 · vaadin/framework · GitHub.

Regards,
Gleb

Hi Gleb
Thanks for that info. Is it possible we can use table to display details instead?

Hi

Old topic, but the issue is still there.

Sadly it seems not.

The following, largely inspired from the (incomplete) documentation, will not provided expected result.

        productsTable.setDetailsGenerator(new DataGrid.DetailsGenerator<Product>() {
            @Override
            public Component getDetails(Product entity) {
                Component detail = getDetail(entity);

                VBoxLayout mainLayout = helper.createComponent(VBoxLayout.class);
                mainLayout.setWidth("100%");
                mainLayout.setMargin(true);

                HBoxLayout headerBox = helper.createComponent(HBoxLayout.class);
                headerBox.setWidth("100%");

                Label infoLabel = helper.createComponent(Label.class);
                infoLabel.setHtmlEnabled(true);
                infoLabel.setStyleName("h1");
                infoLabel.setValue("Dernières commandes");

                //Component closeButton = createCloseButton(entity);
                headerBox.add(infoLabel);
                //headerBox.add(closeButton);
                headerBox.expand(infoLabel);

                mainLayout.add(headerBox);
                mainLayout.add(detail);
                mainLayout.expand(detail);

                return mainLayout;
            }
        });
        productsTable.addSelectionListener(event -> {
            if(selected != null)
                productsTable.setDetailsVisible(selected, false);
            if(event.getSelected().size() == 1) {
                selected = event.getSelected().iterator().next();
                customerOrderLinesDs.refresh();
                if(customerOrderLinesDs.size() != 0)
                    productsTable.setDetailsVisible(selected, true);
            }
        });
    }

    private Component getDetail(Product product) {
        Table table = helper.createComponent(Table.class);
        table.setDatasource(customerOrderLinesDs);
        table.setWidth("100%");
        table.setHeightAuto();
        return table;
    }

The result

image

The table for this case should have 9 columns, what is displayed looks like a label brokenly constructed from a table

I think this is why in the documentation, the detail is created as an html Label or I suppose so, because the code of getContentLabel is not provided, as well as the code for createCloseButton.

Regards,
Michael

Hi,

The full source code can be found in Sampler.

Regards,
Gleb

Thanks @gorelov, so on the main point you confirm that in 6.10 neither DataGrid nor Table can be used in the details ?

Due to the Vaadin issue you can’t use such components.

Right, seems that issue was fixed Oct 18 : Fixes to displaying Grid in a detail row. (#11147) by ZheSun88 · Pull Request #11228 · vaadin/framework · GitHub, but in 8.6.0.

Except if i’m wrong cuba 7.0 relays on 8.6.4, so it should work with it, correct ?

You’re right, in the platform v7 DataGrid can be used in a detail row.

Great, thanks Gleb

Hi Gleb
That’s great!
I looked at the sampler, it’s still old sampler. Is there any sampler available around where a datagrid is used as detail of a datagrid?

Hi,

We are not planning to introduce any samples with this example.

I tried to include a treeDataTable into Datagrid detail and doesn’t work!

Hi,

Unfortunately, I can’t reproduce the problem. If something doesn’t work, please be more specific what’s broken.

Regards,
Gleb