CODEWITHSUNDEEP
javavaadinvaadin-gridvaadin-flow
Steffen Harbich
Steffen Harbich

Reputation: 2749

Customize selection column header of Vaadin Flow Grid component

Is it possible to adapt the column header of the (auto-created) selection column in a Vaadin Flow Grid?

My use case: The "select all" button/checkbox should be visible (although no in-memory data provider) and it should display a warning when all item count is above 100 when selecting all items. Additionally, visuals should indicate none/some/all selected.

As far as I browsed the docs/code I didn't see any possibility. Any idea appreciated. I'm using Vaadin 14.

Upvotes: 2

Views: 966

Answers (2)

Steffen Harbich
Steffen Harbich

Reputation: 2749

A partial workaround is to enable the built-in check box in header of selection column via following code:

var model = (AbstractGridMultiSelectionModel<?>) grid.getSelectionModel();
model.setSelectAllCheckboxVisibility(GridMultiSelectionModel.SelectAllCheckboxVisibility.VISIBLE);

By default the checkbox is hidden when data provider is not in-memory but this work-around will show it again.

Upvotes: 0

kscherrer
kscherrer

Reputation: 5766

This is not a real/full answer, this was first written as comments. But I don't want to clog up the comments so I moved them into this 'answer'. I describe the approach that I think is needed, but I'm not sure if this is the best way. Please take my suggestions with a grain of salt. Do not give me the bounty for this.

Seeing how there is no Java-side API to control anything about the selection column header, I guess the only way will be to make changes to the underlying polymer template @vaadin/vaadin-grid/src/vaadin-grid-selection-column.js, which contains a javascript method _onSelectAllChanged. I am by no means a polymer expert and will not be able to guide you through that modification. But I think it should be possible there to fire a custom event that you could listen to on the java side, where you i.e. show a Notification. This may be not the best way of doing this, it's just my best guess.

the abovementioned polymer template also defines whether the selection-column-header should be displayed or not - you can remove the hidden$="[[_selectAllHidden]]" attribute from the checkbox within the defaultHeaderTemplate to always show the header checkbox.

@KasparScherrer by changing the vaadin-grid-selection-column.js? Anyway, I would like to customize the behavior of the checkbox. I hoped it was somehow possible to do this without js.
- Steffen Harbich

This is not achievable without changing the (js) polymer templates I believe.. You may want to ask this in Vaadins expert chat if you have access to it, or hope they answer here which they do from time to time. I have recently made modifications to the LoginOverlay template using the approach I described, successfully. But I'm still not too comfortable with this whole topic.

you'd have to copy all template files of @vaadin/vaadin-grid, and in order to use your own (modified) templates you'd have to create your own copy of the Grid class (not extend, so it will not look in the node_modules anymore for the templates) and place your own @JsModule. The customization of the behaviour of the checkbox can be done in java, once you fire a CustomEvent in _onSelectAllChanged. Check out @DomEvent to listen to custom events in the java-component.

Upvotes: 2

Related Questions