HorizontalLayout in generated column prevents row selection

I need to place two components within Table’s column: a small link and a label. The simplest way to do this is to add a column generator which places both components into a HorizontalLayout and returns that layout. But I noted that HorizontalLayout captures mouse clicks, preventing row selection in the Table.

Is there a way to make HorizontalLayout “transparent” for mouse events? Or maybe another solution for this problem? I understand that components may live in separate columns, but this has side-effects (like independent column resizing).

Hi exact same problem here!

I tried to solve this by adding a Layout Click Listener, but this somehow redraws all the rows, making the user interface seem “not snappy” and “lazy loads” the Embedded components in that row… All in all makes a bad user experience.

Would love to get a solution to this, as it prevents me from creating custom tables.

Thanks for your help!
JTosh

Hi,

Looks like this is an old issue, asked at least
here
and
there
before. In the latter post Henri suggested handling the click events and it seems to work:

// Have a table with one regular column
final Table table = new Table();
table.addContainerProperty("number", Integer.class, null);
        
// Have some data in the table
for (int i=1; i<=100; i++)
    table.addItem(new Object[]{i}, i);
        
table.addGeneratedColumn("generated", new ColumnGenerator() {
    @Override
    public Component generateCell(Table source,
            final Object itemId, Object columnId) {
        // Get the value in the first column
        int num = (Integer) source
            .getContainerProperty(itemId, "number").getValue();

        // Create the component for the generated column
        VerticalLayout cellLayout = new VerticalLayout();
        cellLayout.addComponent(new Label("Row " + num));
        cellLayout.addComponent(new Label("Square " + num*num));
        cellLayout.addComponent(new Label("Cube " + num*num*num));

        // Forward clicks on the layout as selection
        // in the table
        cellLayout.addListener(new LayoutClickListener() {
            @Override
            public void layoutClick(LayoutClickEvent event) {
                table.select(itemId);
            }
        });
        return cellLayout;
    }
});
        
table.setSelectable(true);

See the
on-line example
.

Unfortunately, I’m experiencing the same reload problems as Todd is. There will unavoidably be one server request for clicks on the layout, which is one more than what you’d have when the table is in non-immediate mode. But it seems to redraw the Table even though the scroll position doesn’t change. That’s not so much a problem, the bigger problem is that it does it
three times
. A click on a layout actually causes three server requests, all of which redraw the table.

This could be a bug in the Table, when selecting an item from server-side. But I’ll have to go now and look at it later.

Created ticket
#6469
about the flicker. It doesn’t occur just in this case, but apparently always when using table.select(item).

I created ticket
#6623
which proposes to remove the special handling for labels, textfields and embedded widgets and adds support for selecting table rows by clicking on any widget embedded within a column.

Hi,

I have seen your patch for version 6.4.8 for the VScrollTable and I tried to do the same with Version 6.6.6 (but did not found any similar text sequence).

Nonetheless, it seems, that the issue is still open and Marko’s solution is the only which works :wink: Are there any news about this feature?

I just ran into the same problem, i like to use a CustomComponent as a Cell and I want selection!!

Hello? We still need a way to tell components embedded into the table cell to not handle clicks. Bcoz for example if I embedd a button into the cell, i need it to handle clicks for sure. And btw, this is not an generated column issue, coze its possible to insert components to table that way:

addContainerProperty("cluster", ClusterListItem.class, null);
for (ClusterListItem item : items) {
			addItem(new Object[]{item}, item.getId());	
		}

I had the same issue and got around simply by adding a VerticalLayout around problematic component

VerticalLayout vLay = new VerticalLayout();
vLay.setSizeUndefined();
vLay.addComponent(x);

Hello,

we are using Vaadin 7.6.5 facing the same problem.

The suggested Solution:

cellLayout.addListener(new LayoutClickListener() { @Override public void layoutClick(LayoutClickEvent event) { table.select(itemId); } }); does not work because a Page navigation, will prevent the table row highlighting:

table.addValueChangeListener(event -> { UI.getCurrent().getNavigator().navigateTo("test"); }); → So the page navigation occurs, and the table row highlight was not rendered?

What can I do?
Thanks for help, best Regards
Thomas