feat: add support for persistent checkbox multi selection

mlopezFC · paodb · commit f33ac0dbcf2a · 2025-02-12T16:11:15.000-03:00
diff --git a/selection-grid-flow-demo/src/main/java/com/vaadin/componentfactory/selectiongrid/LazyDataView.java b/selection-grid-flow-demo/src/main/java/com/vaadin/componentfactory/selectiongrid/LazyDataView.java
@@ -1,16 +1,18 @@
 package com.vaadin.componentfactory.selectiongrid;
 
+import java.util.stream.Stream;
+
 import com.vaadin.componentfactory.selectiongrid.bean.Person;
 import com.vaadin.componentfactory.selectiongrid.service.PersonService;
+import com.vaadin.flow.component.checkbox.Checkbox;
 import com.vaadin.flow.component.grid.Grid;
 import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.data.provider.AbstractBackEndDataProvider;
 import com.vaadin.flow.data.provider.Query;
 import com.vaadin.flow.router.Route;
 
-import java.util.stream.Stream;
-
 @Route(value = "lazy", layout = MainLayout.class)
 public class LazyDataView extends VerticalLayout
 {
@@ -22,9 +24,21 @@ public LazyDataView()
     {
         Div messageDiv = new Div();
 
-        Grid<Person> grid = new SelectionGrid<>();
+        SelectionGrid<Person> grid = new SelectionGrid<>();
         grid.setDataProvider(personDataProvider);
-
+        Checkbox changeMultiselectionColumn = new Checkbox("Multiselection column");
+		changeMultiselectionColumn.addValueChangeListener(event -> {
+			grid.setMultiSelectionColumnVisible(event.getValue());
+		});
+		Checkbox persistentCheckboxSelection = new Checkbox("Persistent selection");
+		persistentCheckboxSelection.setValue(true);
+		persistentCheckboxSelection.addValueChangeListener(event -> {
+			grid.setPersistentCheckboxSelection(event.getValue());
+		});
+		persistentCheckboxSelection.setTooltipText("When enabled, selecting a row via its checkbox will "
+				+ "add or remove it from the current selection without clearing previously selected rows. "
+				+ "This behavior allows users to manage selections manually using checkboxes, "
+				+ "similar to how email clients like Gmail handle selection");
         grid.addColumn(Person::getFirstName).setHeader("First Name");
         grid.addColumn(Person::getAge).setHeader("Age");
 
@@ -37,7 +51,7 @@ public LazyDataView()
         });
 
         // You can pre-select items
-        add(grid, messageDiv);
+        add(new HorizontalLayout(changeMultiselectionColumn,persistentCheckboxSelection), grid, messageDiv);
     }
 
     public static class PersonDataProvider extends AbstractBackEndDataProvider<Person, String> {
diff --git a/selection-grid-flow-demo/src/main/java/com/vaadin/componentfactory/selectiongrid/LazyFocusView.java b/selection-grid-flow-demo/src/main/java/com/vaadin/componentfactory/selectiongrid/LazyFocusView.java
@@ -34,7 +34,7 @@ public LazyFocusView()
                 grid.focusOnCell(item.getValue(), personColumn);
             }
         });
-        personComboBox.setDataProvider(personDataProvider,null);
+        personComboBox.setItems(personDataProvider);
 
         add(personComboBox);
         addAndExpand(grid);
diff --git a/selection-grid-flow-demo/src/main/java/com/vaadin/componentfactory/selectiongrid/SelectionTreeGridView.java b/selection-grid-flow-demo/src/main/java/com/vaadin/componentfactory/selectiongrid/SelectionTreeGridView.java
@@ -5,6 +5,7 @@
 import com.vaadin.flow.component.checkbox.Checkbox;
 import com.vaadin.flow.component.grid.Grid;
 import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.Route;
 
@@ -21,8 +22,21 @@ public class SelectionTreeGridView extends VerticalLayout {
 
     public SelectionTreeGridView() {
         SelectionTreeGrid<Department> grid = buildGrid();
+        Checkbox changeMultiselectionColumn = new Checkbox("Multiselection column");
+		changeMultiselectionColumn.addValueChangeListener(event -> {
+			grid.setMultiSelectionColumnVisible(event.getValue());
+		});
+		Checkbox persistentCheckboxSelection = new Checkbox("Persistent selection");
+		persistentCheckboxSelection.setValue(true);
+		persistentCheckboxSelection.addValueChangeListener(event -> {
+			grid.setPersistentCheckboxSelection(event.getValue());
+		});
+		persistentCheckboxSelection.setTooltipText("When enabled, selecting a row via its checkbox will "
+				+ "add or remove it from the current selection without clearing previously selected rows. "
+				+ "This behavior allows users to manage selections manually using checkboxes, "
+				+ "similar to how email clients like Gmail handle selection");
         addAndExpand(grid);
-        add(checkbox, messageDiv);
+        add(new HorizontalLayout(checkbox, changeMultiselectionColumn, persistentCheckboxSelection), messageDiv);
         setPadding(false);
         setSizeFull();
     }
diff --git a/selection-grid-flow/src/main/java/com/vaadin/componentfactory/selectiongrid/SelectionGrid.java b/selection-grid-flow/src/main/java/com/vaadin/componentfactory/selectiongrid/SelectionGrid.java
@@ -48,6 +48,8 @@ public class SelectionGrid<T> extends Grid<T> {
 	  
     private Integer selectRangeOnlyFromIndex = null;
     private Set<T> selectRangeOnlySelection = new HashSet<T>();
+    private boolean multiSelectionColumnVisible = false;
+    private boolean persistentCheckboxSelection = true;
 
     /**
      * @see Grid#Grid()
@@ -90,7 +92,7 @@ public SelectionGrid(Class<T> beanType) {
     protected void onAttach(AttachEvent attachEvent) {
         super.onAttach(attachEvent);
         if (this.getSelectionModel() instanceof SelectionModel.Multi) {
-            hideMultiSelectionColumn();
+        	setMultiSelectionColumnVisible(multiSelectionColumnVisible);
         }
     }
 
@@ -294,7 +296,7 @@ private Optional<Stream<T>> fetchFromProvider(int offset, int limit) {
 
     @Override
     protected void setSelectionModel(GridSelectionModel<T> model, SelectionMode selectionMode) {
-        if (selectionMode == SelectionMode.MULTI) {
+        if (selectionMode == SelectionMode.MULTI && !this.multiSelectionColumnVisible) {
             hideMultiSelectionColumn();
         }
         super.setSelectionModel(model, selectionMode);
@@ -305,11 +307,7 @@ protected void setSelectionModel(GridSelectionModel<T> model, SelectionMode sele
      * is not removed, but set to "hidden" explicitly.
      */
     protected void hideMultiSelectionColumn() {
-        getElement().getNode().runWhenAttached(ui ->
-                ui.beforeClientResponse(this, context ->
-                        getElement().executeJs(
-                                "if (this.querySelector('vaadin-grid-flow-selection-column')) {" +
-                                        " this.querySelector('vaadin-grid-flow-selection-column').hidden = true }")));
+    	this.setMultiSelectionColumnVisible(false);
     }
 
     /**
@@ -331,4 +329,50 @@ public void removeThemeVariants(SelectionGridVariant... variants) {
         getThemeNames().removeAll(Stream.of(variants)
                 .map(SelectionGridVariant::getVariantName).collect(Collectors.toList()));
     }
+
+	/**
+	 * Returns true if the multi selection column is visible, false otherwise.
+	 * @return
+	 */
+	public boolean isMultiSelectionColumnVisible() {
+		return multiSelectionColumnVisible;
+	}
+
+	/**
+	 * Sets the visibility of the multi selection column.
+	 * 
+	 * @param multiSelectionColumnVisible - true to show the multi selection column, false to hide it
+	 */
+	public void setMultiSelectionColumnVisible(boolean multiSelectionColumnVisible) {
+		if (this.getSelectionModel() instanceof SelectionModel.Multi) {
+	        getElement().getNode().runWhenAttached(ui ->
+            ui.beforeClientResponse(this, context -> {
+            	getElement().executeJs(
+                        "if (this.querySelector('vaadin-grid-flow-selection-column')) {" +
+                                " this.querySelector('vaadin-grid-flow-selection-column').hidden = $0 }", !multiSelectionColumnVisible);
+            	this.recalculateColumnWidths();
+            }));
+		}
+		this.multiSelectionColumnVisible = multiSelectionColumnVisible;
+	}
+
+	/**
+	 * Returns true if the checkbox selection is persistent, false otherwise.
+	 * 
+	 * @return
+	 */
+	public boolean isPersistentCheckboxSelection() {
+		return persistentCheckboxSelection;
+	}
+
+	/**
+	 * Sets the checkbox selection to be persistent or not.
+	 * 
+	 * @param persistentCheckboxSelection - true to make the checkbox selection persistent, false otherwise
+	 */
+	public void setPersistentCheckboxSelection(boolean persistentCheckboxSelection) {
+		this.getElement().executeJs("this.classicCheckboxSelection = $0", !persistentCheckboxSelection);
+		this.persistentCheckboxSelection = persistentCheckboxSelection;
+	}
+
 }
diff --git a/selection-grid-flow/src/main/java/com/vaadin/componentfactory/selectiongrid/SelectionTreeGrid.java b/selection-grid-flow/src/main/java/com/vaadin/componentfactory/selectiongrid/SelectionTreeGrid.java
@@ -47,12 +47,16 @@
  *
  * @param <T> – the grid bean type
  */
+@SuppressWarnings("serial")
 @Tag("vaadin-selection-grid")
 @CssImport(value = "./styles/grid.css", themeFor = "vaadin-selection-grid")
 @JsModule("./src/vcf-selection-grid.js")
 @JsModule("./src/selection-grid.js")
 public class SelectionTreeGrid<T> extends TreeGrid<T> {
 
+    private boolean multiSelectionColumnVisible = false;
+    private boolean persistentCheckboxSelection = true;
+
     /**
      * @see TreeGrid#TreeGrid()
      */
@@ -90,7 +94,7 @@ public SelectionTreeGrid(HierarchicalDataProvider<T, ?> dataProvider) {
     protected void onAttach(AttachEvent attachEvent) {
         super.onAttach(attachEvent);
         if (this.getSelectionModel() instanceof SelectionModel.Multi) {
-            hideMultiSelectionColumn();
+        	setMultiSelectionColumnVisible(multiSelectionColumnVisible);
         }
     }
 
@@ -221,7 +225,7 @@ private void selectRangeOnlyOnClick(int fromIndex, int toIndex) {
     @Override
     protected void setSelectionModel(GridSelectionModel<T> model, SelectionMode selectionMode) {
         if (selectionMode == SelectionMode.MULTI) {
-            hideMultiSelectionColumn();
+        	setMultiSelectionColumnVisible(multiSelectionColumnVisible);
         }
         super.setSelectionModel(model, selectionMode);
     }
@@ -231,14 +235,9 @@ protected void setSelectionModel(GridSelectionModel<T> model, SelectionMode sele
      * is not removed, but set to "hidden" explicitly.
      */
     protected void hideMultiSelectionColumn() {
-        getElement().getNode().runWhenAttached(ui ->
-                ui.beforeClientResponse(this, context ->
-                        getElement().executeJs(
-                                "if (this.querySelector('vaadin-grid-flow-selection-column')) {" +
-                                        " this.querySelector('vaadin-grid-flow-selection-column').hidden = true }")));
+    	this.setMultiSelectionColumnVisible(false);
     }
 
-
     @Override
     public Column<T> addHierarchyColumn(ValueProvider<T, ?> valueProvider) {
         Column<T> column = addColumn(LitRenderer.<T> of(
@@ -284,4 +283,49 @@ public void removeThemeVariants(SelectionGridVariant... variants) {
         getThemeNames().removeAll(Stream.of(variants)
                 .map(SelectionGridVariant::getVariantName).collect(Collectors.toList()));
     }
+
+	/**
+	 * Returns true if the multi selection column is visible, false otherwise.
+	 * @return
+	 */
+	public boolean isMultiSelectionColumnVisible() {
+		return multiSelectionColumnVisible;
+	}
+
+	/**
+	 * Sets the visibility of the multi selection column.
+	 * 
+	 * @param multiSelectionColumnVisible - true to show the multi selection column, false to hide it
+	 */
+	public void setMultiSelectionColumnVisible(boolean multiSelectionColumnVisible) {
+		if (this.getSelectionModel() instanceof SelectionModel.Multi) {
+	        getElement().getNode().runWhenAttached(ui ->
+            ui.beforeClientResponse(this, context -> {
+            	getElement().executeJs(
+                        "if (this.querySelector('vaadin-grid-flow-selection-column')) {" +
+                                " this.querySelector('vaadin-grid-flow-selection-column').hidden = $0 }", !multiSelectionColumnVisible);
+            	this.recalculateColumnWidths();
+            }));
+		}
+		this.multiSelectionColumnVisible = multiSelectionColumnVisible;
+	}
+
+	/**
+	 * Returns true if the checkbox selection is persistent, false otherwise.
+	 * 
+	 * @return
+	 */
+	public boolean isPersistentCheckboxSelection() {
+		return persistentCheckboxSelection;
+	}
+
+	/**
+	 * Sets the checkbox selection to be persistent or not.
+	 * 
+	 * @param persistentCheckboxSelection - true to make the checkbox selection persistent, false otherwise
+	 */
+	public void setPersistentCheckboxSelection(boolean persistentCheckboxSelection) {
+		this.getElement().executeJs("this.classicCheckboxSelection = $0", !persistentCheckboxSelection);
+		this.persistentCheckboxSelection = persistentCheckboxSelection;
+	}
 }
diff --git a/selection-grid-flow/src/main/resources/META-INF/resources/frontend/src/helpers.js b/selection-grid-flow/src/main/resources/META-INF/resources/frontend/src/helpers.js
@@ -50,7 +50,10 @@ export function _debounce(func, wait, immediate) {
 	}
 };
 export function _selectionGridSelectRowWithItem(e, item, index) {
-    const ctrlKey = (e.metaKey)?e.metaKey:e.ctrlKey; //(this._ios)?e.metaKey:e.ctrlKey;
+    let ctrlKey = (e.metaKey)?e.metaKey:e.ctrlKey; //(this._ios)?e.metaKey:e.ctrlKey;
+    if (!this.classicCheckboxSelection && e.srcElement && e.srcElement.parentNode && e.srcElement.parentNode.nodeName === 'VAADIN-CHECKBOX') {
+        ctrlKey = true;
+    }
     // if click select only this row
     if (!ctrlKey && !e.shiftKey) {
         if (this.$server) {

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ public LazyFocusView()`
`34`	`34`	`grid.focusOnCell(item.getValue(), personColumn);`
`35`	`35`	`}`
`36`	`36`	`});`
`37`		`- personComboBox.setDataProvider(personDataProvider,null);`
	`37`	`+ personComboBox.setItems(personDataProvider);`
`38`	`38`
`39`	`39`	`add(personComboBox);`
`40`	`40`	`addAndExpand(grid);`