Set hidable and hidden columns in Grid

Flow
1

Hi,

according to Vaadin 10 flow documentation, it should be possible to hide columns. From doc:

“Columns can be hidden by calling setHidden() in Column. Furthermore, you can set the columns user hidable using method setHidable().”

However, I cannot find these methods in Column class?

Version: 10.0.0.rc5

Regards
Rolf

2

Good point, it seems that there is slight error in the documentation vs. actual API:

https://demo.vaadin.com/javadoc/com.vaadin/vaadin-core/10.0.0.rc5/com/vaadin/flow/component/grid/Grid.Column.html#setVisible-boolean-

3

Thanks.

setVisible(false) does hide the column, but there seems to be no way for the user to make it visible again.

In Vaadin 7/8 it was possible to allow the user themselves to hide/show columns using a menu on the top right. Is that still supported in Vaadin 10 Flow?

Also, column reorder, is that supported?

Thanks
Rolf

4

Hi,

I am also curious if it is still possible to allow the user to show/hide columns with a menu in the top right in Vaadin 13.

5

Hi,

Is there any news about this?

I think it is an important feature for grids.

Thanks!

6

Hi,
I agree, this is a feature in Vaadin 8 that should be available in Vaadin Flow. Is there at least an example of how to implement that in custom code?
Thanks!

7

Hi, there is no out of the box feature for that (and I don’t know, if it is planned).

But you can simply implement that yourself.

  1. Create a horizontal layout (or another container, that you style as you need).
  2. Add a Span with your column header label and a button with an icon (for instance cogs or down arrow) into the horizontal layout.
  3. Create a context menu for the button
    • activate setOpenOnClick
    • add items for each of your columns
    • assign click listeners for each of the items to show/hide the respective column
  4. Set the horizontal layout as header of the column.

Implementing this shouldn’t take more than 5 minutes or so :slight_smile:

(With 14.1 there will likely be also support for dynamic context menu creation on click time, so that you can check on opening time, which columns are shown or hidden. Until that, cache the items internally to update the visible states).

8

Hi,

I created a ticket about it: https://github.com/vaadin/vaadin-grid-flow/issues/838

Feel free to thumbs up or add a comment with your need.

I think in the current state of the grid, it’s not easy to implement a column visibility toggler which works for all the grid setups.
There are few problems or missing features:

  • no hideable attribute for a column (you cannot configure this easily for your custom toggler)
  • no getHeaderText or getHeader to display a label for each column in the column visibility toggler
  • a non visible column is different than having a column removed. (from the COlumn.setVisible Note that column related data is sent to the client side even if the column is invisible. Use {@link Grid#removeColumn(Column)} to remove column (or don’t add the column all) and avoid sending extra data.). So if you have a lot of hidden columns, the grid could be slow down because of the hidden columns.

I’ll try to make an example of column visibility toggler or if you have one, feel free to add this in the ticket :slight_smile:

(The column reorder functionality from the Java side has been added in Vaadin 14.1 that will be released really soon)

9

There are various ways to implement a custom column visibility toggler, each of havign pros an cons. One can use e.g. ContextMenu, MultiSelectComboBox, I did some experimentation with Popup populated with CheckBoxes, which you can find here:

https://github.com/TatuLund/devday-demo-flow/blob/master/src/main/java/com/vaadin/devday/demo/views/GridView.java

10

Thanks for the reply and the example! I’ll give it a shot and let you know if I have any trouble using it.

11

I ended up creating a different solution. I added a button off of the grid that has a list of checkboxes, one for each column that may be hidden. Then once the grid is loaded I move this button using Javascript to the first cell in the grid. This is what it ends up looking like:

It feels a bit hackish and might break if the structure of the grid in html changes but it works!
18129812.png