How do you get the column order for the Grid in Vaadin 14?

Question

In Vaadin 8 you could just do the following for example to get a list of the columns in the order displayed on the screen.

String columnOrderPreference = ((List<Grid.Column>)grid.getColumns()).stream()
            .map(Grid.Column::getId)
            .collect(Collectors.joining(VALUE_SEPARATOR));

This was especially handy because you could then save that string and then call:

grid.setColumnOrder(columnOrderPreference.split(VALUE_SEPARATOR));

In Vaadin 14 (ignoring that getId() should now use getKey()) this is no longer possible because the getColumns() list is now always returned in the order they were added and not the order in which they are ordered. You can still call setColumnOrder(...) (with different parameters - list of grid.getColumnByKey(columnKey)) but I cannot figure out how to get the list of columns in the order they are displayed.

This is especially useful for trying to save the column order the user has set/changed when they come back to the same page (with the Grid).

Zoophyte

Answer 1

You can listen for ColumnReorderEvent on the grid.

Registration addColumnReorderListener(ComponentEventListener<ColumnReorderEvent<T>> listener)

The event holds:

/* Gets the new order of the columns. */
List<Grid.Column<T>> getColumns()

Donnadonnamarie

Thank you that helped. Is there no option within the grid itself? I ask because that means I have to have a special event listener for re-ordering whereas I can use the same code for all the others and just re-save everything in one step on any change (column width, sort order, column visibility, etc.) – Zoophyte

(above comment too) I store everything in a string that is parsed through a special preference handling class. But if the column order can only be retrieved through an event then that could get quite hairy in that the column order has to be saved for the event handling code which saves the column width for example as part of the whole string because I could no longer get the order from the grid for the other event... – Zoophyte

I also have a column hide/show button in other code that would interrogate the grid for the preferences so that it could all be stored as a parsed string. I assume in that case the column order information would also need to be stored as it's not possible to retrieve. My apologies for all the questions but this is a fairly big refactoring if the grid cannot be interrogated for it's state. – Zoophyte

That or I have to extend the grid to hold that information which I would prefer not to do... – Zoophyte

I don't actually follow. I mean I understand that you are not happy with the situation, but you start with a known good grid setup, the default settings. Then you have all the listeners im place so you can react to the changes the user does (always has to be listeners). Then you derive settings' from settings + changes and keep those for the user. – Donnadonnamarie

In essence if I understand correctly there is no way to interrogate the grid to get it's state so that it can be saved and restored. You have instead have to track it's state through events, meaning you then have to track the state yourself either by extending the grid class or have some kind of management code somewhere. So for example if you have a hide/show column button outside of the grid then that too has to have access to the grid's state as the grid doesn't manage this for the column ordering. – Zoophyte

Column visibility, sorting order, etc. all seem to be managed and possible to retrieve through the API just not the column ordering. So if you ever want to save the grid's state somewhere you then have to manage the column ordering because the grid doesn't let you get that information. The grid is very powerful and useful it just seems like a big omission to miss one thing in the grids state to have to create your own customGrid to be able to store the column order. So much that I keep thinking I'm missing something, that it's me and not an ommission. – Zoophyte

You are barking up the wrong tree. This is just one answer and maybe not even a definitve one. – Donnadonnamarie

I'm just asking because I keep thinking I'm missing something... I basically created CustomGrid where the constructor adds: List<Column> columnOrder = addColumnReorderListener(event -> columnOrder = event.getColumns().stream() .filter(column -> column.getKey() != null) .collect(Collectors.toList())). I then do CustomGrid.getColumnOrder() in my code instead of Grid.getColumnOrder(). The downside is that I now have to use CustomGrid everywhere instead of just Grid for that one method. That's why I keep thinking the issue is that I'm missing something – Zoophyte

Thank you for the help. – Zoophyte

Answer 2

Unfortunately in Vaadin 14 getColumns does not return the columns in the right order. You can get the order when with the event GridReorderEvent as said before and you need to store it. There is a feature request here ( that will give you some technical reasons if you're interested): https://github.com/vaadin/flow-components/issues/1315

You can add a comment or vote for it, because it makes the migration from Vaadin 8 harder.

Rickey