How to consume the click event on vaadin table

Vaadin 6 / 7 / 8
1

How can i avoid selection of a row when i click on certain column in the row. or even selection of rows using ctrl-click when clicked on particular column.

2

So you need only a readonly table?

You can try setting
enabled
 property to false:

table.setEnabled(false);
3

Or not selectable?

table.setSelectable(false);
4

No the table is not a read only table. i Change the cell value when i click on it.

it needs to be a selectable table too.

say i have a table with 2 columns ‘a’ and ‘b’
when i click on cell in column ‘a’ i have to change the value of the cell and avoid selection.
but when i cell in column ‘b’ i need to select the row.

is there a direct way to do this?

5

Try this and see if it fits with your case. Also, have a look at Grid component introduced in 7.4. It’s purpose is to replace Table.

        // Set the editable property to enable the editors.
        table.setEditable(true);

        // Set selectable property to enable selection.
        table.setSelectable(true);

        // Set a field factory to create custom editors.
        table.setTableFieldFactory(new TableFieldFactory() {

            @Override
            public Field<?> createField(Container container,
                    final Object itemId, Object propertyId, Component uiContext) {

                // In case of column 'b' provide no editor because maybe you want
                // to only select it.
                if (propertyId.equals("columnB")) {
                    return null;
                }

                // In case of any other columns provide a TextField.
                TextField textField = new TextField();

                // Add this focus listener to select the cell editor's row when the
                // editor is focused. Without this, when you focus an editor while
                // selection is on a different row, selection won't change.
                // For me it looks odd to edit a cell in a row while the selection is
                // on another row.
                textField.addFocusListener(new FieldEvents.FocusListener() {

                    @Override
                    public void focus(FocusEvent event) {
                        // If you want no selection at all while editing just loose
                        // the selection instead of changing it.
                        // You can provide null instead of itemId: table.select(null);

                        table.select(itemId);
                    }
                });

                return textField;
            }

        });
6

Thanks for the reply.

But ,I change the value of the cell value by just clicking on it.

 Item item = table.getItem(row);
 item.getItemProperty(event.getPropertyId()).setValue(newValue);

in itemclicklistener. I am not giving provision to type in the value.

The ItemClickEvent is fired before ValueChangeEvent is there a way to reverse this? (Have the ValueChangeEvent fire before the ItenClickEvent?)

7

So you don’t want to let user change the value in a TextField or something? Yet you want to change it. But also you don’t want the cell user clicks to be selected? I’m not sure I get this. Would be really handy to attch a fully working UI reproducing the exact behaviour and more details.

When do you change the value of the property? When user clicks on the table, in an ItemClickListener?

There must be an order of the events, so the logic way is as it’s happening. User’s first action is to click on table cell, that’s when you get the ItemClickEvent. Then follows the change of the value and you get the ValueChangeEvent. I’m not sure I understand.

8

Bogdan,

Think of a table that needs to have multi-select capability. Additionally, a click in a particular column should be processed by application-specific event-processing code. If that code succeeds in handling the event, then the event should be “consumed” (in Swing language), rather than continue to be processed by the Table, which will treat it as a click that adjusts the current selection.

In short, is there a way to override the click processing of the Table (or other component, for that matter) if the application has a special click handler that believes it has successfully processed the event.

9


Just for context, this isn’t asking for something unusual. GWT has this concept in

com.google.gwt.event.dom.client.DomEvent.preventDefault()
And elemental has this concept in

elemental.events.Event.stopImmediatePropagagion() elemental.events.Event.stopPropagagion()
And Swing has it as

Event.consume() If an event handler for a child node does not consume the event, an event handler for a parent node can act on the event after a child node processes it and can provide common event processing for multiple child nodes.

10

Hi,

Look for NativePreviewHandler and NativePreviewEvent.preventDefault().

Either you implement an Extenstion or just override the Table and implement both it’s server side connector and client side connector. On the gwt client side you can register the NativePreviewHandler and handle the click there.

Have a look here for how to build and use an Extension:
https://vaadin.com/book/-/page/gwt.extension.html

11

Thanks, Bogdan, for your answer. I suggest that Vaadin consider adding support for event.consume(), as it’s a widespread GUI idea that’s needed by applications. It shouldn’t be hard to implement; if consumed, just don’t fire the remaining event listeners; and listener order is important.

12

Hi George,

Thanks for the suggestion. It’s something that should definettly be added. As you mentioned, in a UI framework it’s natural to stop event propagation.

All the best,
Bogdan.

13

There is a ticket now about adding consume functionality on server side events:
https://dev.vaadin.com/ticket/17811