Vaadin-grid: selecting row when row is clicked when selection mode is multi

[cutout33]

I have a grid with multi selection mode, Currently I can only select/deselect a row via the checkbox, but I want this to happen when a user click anywhere on the row.

any ideas?

[platosha]

Hi! Unfortunately, it is neither directly supported nor implementable by users, currently.

Having the row click events should be enough to implement this UX. That feature is on our map already, see #144.

[jouni]

Couldn’t you achieve this with cell renderers? Have a click listener for all cells. Probably very, very innefficient, but would be a workaround.

[cutout33]

I already tried this with jQuery $("table tr").click(); but am unable to change the table selection for some reason!

[platosha]

I would recommend you not to use jQuery for that. The workaround you have relies on that the local DOM contents of the vaadin-grid are exposed outside. This is due to the shady DOM mode, which is the Polymer’s default currently, but might be changed in future. The local DOM structure is not a part of the element’s public API. The tr nodes are created dynamically, so this might not define the event listener for all the grid rows.

Actually, I found that the row elements are exposed in the row object in the rowClassGenerator callback. It's better to assign the event listeners this way:

grid.rowClassGenerator = function(row) {
  var rowIndex = row.index;
  row.element.onclick = function() {
    if (grid.selection.selected().indexOf(rowIndex) === -1) {
      grid.selection.select(rowIndex);
    } else {
      grid.selection.deselect(rowIndex);
    }
  };
  return "";
};

[cutout33]

Thanks but the app goes into infinite loop when I add this code, also your code only selects the row on second click and there is no deselect :(

grid.rowClassGenerator = function(row) { if (!row.element.onclick) { var index = row.index; if(jQuery.inArray(index, grid.selection.selected()) == -1) { console.log('bye'); grid.selection.select(index); } else { console.log('hi'); grid.selection.deselect(index); } } };

[platosha]

@cutout33 right. Updated my code above.

[cutout33]

perfect!

[MatthiasMak]

Can we reopen this issue for a Java based solution?

[web-padawan]

@MatthiasMak this issue is quite old and a lot has changed since 2016.

In case you are using Vaadin Platform 10 and Flow, please submit your issue with the detailed description about the Java grid to https://github.com/vaadin/vaadin-grid-flow

[F43nd1r]

There is already an issue for a java solution in vaadin-grid-flow: https://github.com/vaadin/vaadin-grid-flow/issues/195