Databinding and order of columns in grid

General
1

HI,

I am using data binding in my app but is there any way of changing the order of the columns in the grid? It appears to be alphabetical (rather than in the order I have it listed in my code). I have tried using this command

grid.setColumnOrder(beamStatus, date, machine, user);

but not sure if there’s a bug as it just keeps telling me the brackets shouldn’t there. All my code related to binding etc works, this is the only line I am adding.

Thanks!

2

It depends how you initialize the Grid and what Vaadin version you are using. In Vaadin flow (10+) there is no method setColumnOrder(), instead the order in which the columns are added will define the column order.

If you create the Grid by passing a class as parameter, the grid will be initialized with columns for the basic properties of the given class. I assume this is the case with you, as you probably wouldn’t have this problem otherwise since you could add the columns in the order you want. You now have these options:

  • set new column order (Vaadin 7+8 only) using grid.setColumnOrder(beamStatusColumn, dateColumn, ...); Keep in mind that all parameters have to be instances of Grid.Column. If this does still not work for you, maybe more information about what your error is would help.
    Edit: it’s also possible to pass the column ids as string, which is going to be very helpful if you did not create/add the columns yourself (because you may have no column instances). The column ids will be the names of the properties in the item class → grid.setColumnOrder("beamStatus", "date", "machine", "user");
  • initialize the grid without giving a class as parameter, OR give a second parameter false into the grid constructor which will prevent automatic column generation for basic properties. Grid<MyClass> grid = new Grid<>(); / Grid<MyClass> grid = new Grid<>(MyClass.class, false);
    After this, you will have to add all columns manually, in the order that you want.
  • remove all columns, then add columns that you define yourself in the order that you want. grid.removeAllColumns(); grid.addColumn(...); grid.addColumn(...);.
    You could also remove single columns, and add them again, this way you could reorder single columns during runtime in Vaadin flow. I have had to use this in one of my flow applications, as the column sorting and hiding functionality is not there yet sadly ([flow grid column order issue]
    (https://github.com/vaadin/vaadin-grid-flow/issues/333), [flow grid column hiding issue]
    (https://github.com/vaadin/vaadin-grid/issues/1431)).