Vaadin grid user column re-ordering and saving per user

Question

How do people tend to let users re-order the grid columns and save that ordering for later?

The only way I can think of to do it, at least in Vaadin 7, is:

1. Listen for column re-ordering via addColumnReorderListener(…)
2. When re-order triggered, if user initiated, get columns from getColumns() and save to DB with any identifying information
3. When pull Grid back up, read grid ordering from DB and apply the same order with setColumnOrder(columns)

So is there a better way to do this? I just checked the Directory, could not find anything obvious to make this easier. Just looking for how others have addressed this user requirement. If Vaadin 14 already supports such actions a little easier, that would be good to know as well, as it might give me some ideas on how to get that ability short term before I can upgrade to Vaadin 14.

Answer 1

Just so people know how I solved this issue, based on the comments:

1. When load data into Grid, first check database for columns of this Grid/user combination. If find such a column order, call setColumnOrder(userColumns) .
2. Added 2 buttons to top, one to save column order, one to reset it.
3. "Save" button only enabled after moving at least one column.
4. "Reset" button only enabled if at least one column was moved. One column was moved either because of the DB, or because user JUST moved a column.
5. On save, save to DB. On reset, clear from DB, and restart Grid to original column order.

We chose not to save the column order each time they changed the order, directly in the addColumnReorderListener , because we realized sometimes users might move columns around temporarily, and one really want to save that column order for the future. That said, the saving inside the addColumnReorderListener worked well.

We don't currently need to save the column sizes, as suggested by @Simon Martinelli, but we are keeping it as an idea for the future. I fully expect it would work.

Answer 2

For a more customizable grid you can (in addition to what you've already done) add a button that opens a dialog that lists all possible columnnames, together with a checkbox. Unchecking the checkbox removes the column, checking the checkbox adds the column.

Even more comfortable is when the dialog lists all available columns in a Grid with draggable rows and editable checkboxes, so that the user can show, hide and sort all columns in one place. After that you have to reorder all columns by calling grid.setColumnOrder .