Get the Grid Column by ClickListener

Flow
1

I would like to get the grid.column object when mouse clicking.

I found an example from Vaadin website( https://vaadin.com/components/vaadin-grid/java-examples/click-listeners), but this example is helpful for getting the grid row object in another word is a grid item or entity.

Grid<Person> grid = new Grid<>();
grid.setItems(getItems());
grid.addColumn(Person::getfirstName).setHeader("First name");
grid.addColumn(Person::getAge).setHeader("Age");

// Disable selection: will receive only click events instead
grid.setSelectionMode(Grid.SelectionMode.NONE);

grid.addItemClickListener(
        event -> message.setText("Clicked Item: " + event.getItem()));

Anyone has some suggestionｓ for getting the column infomation when make the mouse clicking.

2

Hi!
This sounds like a good feature to add into the ItemClickEvent API. You can create a ticket about it in https://github.com/vaadin/vaadin-grid-flow/issues

If you absolutely need this functionality already, I have a workaround for you, which you can use on your own responsibility:

public static <T> void addColumnClickListener(Grid<T> grid,
        Consumer<Column<T>> listener) {
    String expression = "function(){const col=element.getEventContext(event).column;return col ? col.id : '';}()";
    grid.getElement().addEventListener("click", e -> {
        String colId = e.getEventData().getString(expression);
        Optional<Column<T>> column = grid.getColumns().stream()
                .filter(col -> colId.equals(col.getId().get())).findFirst();
        column.ifPresent(listener);
    }).addEventData(expression);
}

For this method to work, you need to also set ids for the columns with setId(). It can be then used like this:

addColumnClickListener(grid, column -> column.setHeader("clicked"));
3

Thanks Pekka,

It is great wondaful suggestion. Your suggested codes really fine and realized to get the column ID.
And I created the ticket on Github repository of vaadin-grid-flow.

Ippei

4

Is the columnClickListener in the latest V14 versions ? it is bizarre that it is not there.

5

Jorn De Pril:
Is the columnClickListener in the latest V14 versions ? it is bizarre that it is not there.

Hi, Jorn! You can now use ItemClickEvent::getColumn for this purpose.

For example:

Grid<Person> grid = new Grid<>(Person.class);
grid.addItemClickListener(e -> {
    Column<Person> column = e.getColumn();
    if (column.getKey() == "name") {
        // name column clicked
    }
});
6

Hi Pekka,

What i am looking for is to sort my columns alphabetically or on date when i click on column headers.
When I use a filterablePageableDataProvider than it works fine.

But portions of my code use :

private ListDataProvider<ActionLogging> actionDataProviderList = DataProvider.ofCollection(resultingActions);

So i am searching how I can sort my grid according to the clicks on the column Headers. Those are not clicks on the items.

Grts,
Jorn

7

Alright, that’s indeed not doable with an item click listener.

I couldn’t find an issue for this feature with a quick search. Feel free to create one if you wish: https://github.com/vaadin/vaadin-grid/issues

One potential solution is to add a component to the header and add click listener on that component, e.g.:

Div headerComponent = new Div();
headerComponent.setText("Name");
headerComponent.addClickListener(e -> {
    // header clicked;
});
column.setHeader(headerComponent);

I’m not sure if the component will fill the entire header cell. In that case it’s possible that the click event is not fired on the edges of the cell. If that’s a problem, it should be possible to solve with CSS.

8

Hi Pekka,

It works good enough. The only difference is i should not click on the arrows for sorting but really on the text but it will do for now as a quick workaround until i have refactored to another dataprovider.

Many thanks !
Jorn