search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
471 stars 83 forks source link

[grid] Reintroduce grid selection mode API #1949

Open platosha opened 6 years ago

platosha commented 6 years ago

Motivation

Currently, <vaadin-grid> has builtin selection always enabled with multi selection supported, but not exposed for end users by default. Developers may expose selection for end-users using <vaadin-grid-selection-column>, bindings for selectedItems, etc. There is no explicit property for setting the selection mode on the grid itself.

Because of that, the grid does not know what kind of the selection mode is used. Therefore, the grid can not reliably indicate aria-multiselectable. Currently the grid always has aria-multiselectable="true" indicated, since it’s a better match over the default value of false.

There are other issues related with lacking selection mode API on the grid:

API Proposal

Add a property selectionMode: String, accepted modes:

selectionMode Row click / Space behavior aria-multiselectable cursor style
custom (default) Does not select by default, preserves backwards compatibility with grid v2...v4 default false default
single Selected the clicked row, deselect any other rows default false pointer
multi Toggles selection for the row, does not affect other rows true pointer
hybrid As in macOS Finder and Windows Explorer true pointer

Note: in hybrid mode, selection should probably follow keyboard focus, as it does in Finder and Explorer.

Remove autoSelect property in <vaadin-grid-selection-column> as a duplicate of the grid’s selection mode.

Enabling selection on the grid with selectionMode does not add a selection column. Users have to add <vaadin-grid-selection-column> or their custom selection column explicitly, if needed.

jouni commented 6 years ago

So, there’s no aria-selectable attribute?

platosha commented 6 years ago

So, there’s no aria-selectable attribute?

It’s called aria-selected, defaults to undefined not selectable, accepts false and true when selectable.

That’s a tricky question. As @tomivirkki suggested on Slack, we could name the default mode as custom to preserve backwards compatibility. I’ve updated the spec to reflect that. But, if we do so, none of the aria-selected options matches the custom mode. As the spec says:

Value Description
false The selectable element is not selected.
true The selectable element is selected.
undefined default The element is not selectable.
tomivirkki commented 6 years ago

The "hybrid" mode might be impossible to implement in the core, since while using a lazy data provider, Grid can't know all the items between two indexes (when shift clicking to select a range) to properly populate selectedItems, unless it has visited all of them.

We could add an example how to implement this functionality with a custom data provider though.

jouni commented 6 years ago

Btw, I think this would be a welcomed API for vaadin-list-box as well.

jouni commented 6 years ago

One thing to consider is that it should be possible to change the mode at runtime. Or is it possible to make it as a startup configuration property only?

brp-oskar commented 6 years ago

In our Swing application we have a grid component that works like the hybrid mode. I thought that it would be great with the same functionality for our Vaadin Flow application. But the hybrid mode won't work great on touch devices. We'll have to change mode to multi on touch devices.

I have looked at Gmail's selection model. They have checkboxes for selection and they support SHIFT+mouse click on checkboxes to do multi selection of rows. I think that is a nice feature that could be added to the multi mode (even if it feels a little strange to SHIFT-click a checkbox). https://www.lifewire.com/how-to-select-multiple-messages-quickly-in-gmail-1172037

Gmail's "select all" checkbox implementation is better for us than Vaadin's Grid implemented. Vaadin Grid shows a checkbox with a "-" sign (indeterminate?) but it does not do "minus", it adds all rows to the selection. If you have one or more rows selected in Gmail and clicks on the "select all" checkbox, it will deselect all rows. All rows will only be selected when there are no rows already selected. That is more useful, because otherwise there are no quick way to deselect all selected rows (except for selecting all rows first, but that is a performance issue when dealing with lazy loading and database).

For us I think multi mode, with those two changes, is better than hybrid mode.

TatuLund commented 4 years ago

One use case for having better access (from Java) to check box column is to conditionally disable the checkboxes to allow conditional multiselect mode, which is requested on this ticket https://github.com/vaadin/vaadin-grid/issues/1840

jcgueriaud1 commented 3 years ago

There is an add-on to manage the multi selection with shift/ctrl: https://vaadin.com/directory/component/selection-grid If you select all the rows with shift-click then it fetches the entire data on the server side. That could be a problem with a lazy dataprovider.