feat: Composite Editor should support cell selection (#1990)

wscherphof · Azure Pipeline · web-flow · commit 0a7ab6e3b591 · 2025-05-29T09:53:40.000-04:00
* feat: Composite Editor should support cell selection, fixes #1987 --------- Co-authored-by: Azure Pipeline <pipeline@azure.com>
diff --git a/demos/aurelia/test/cypress/e2e/example30.cy.ts b/demos/aurelia/test/cypress/e2e/example30.cy.ts
@@ -558,10 +558,6 @@ describe('Example 30  Composite Editor Modal', () => {
     cy.get('.slick-editor-modal').should('not.exist');
   });
 
-  it('should not have any row selected after the mass-selection save is over', () => {
-    cy.get('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 0);
-  });
-
   it('should have updated all the changed values BUT only on the 2 selected rows', () => {
     cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(4)`).should('contain', '51');
     cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(7)`)
diff --git a/demos/react/test/cypress/e2e/example30.cy.ts b/demos/react/test/cypress/e2e/example30.cy.ts
@@ -558,10 +558,6 @@ describe('Example 30  Composite Editor Modal', () => {
     cy.get('.slick-editor-modal').should('not.exist');
   });
 
-  it('should not have any row selected after the mass-selection save is over', () => {
-    cy.get('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 0);
-  });
-
   it('should have updated all the changed values BUT only on the 2 selected rows', () => {
     cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(4)`).should('contain', '51');
     cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(7)`)
diff --git a/demos/vue/test/cypress/e2e/example30.cy.ts b/demos/vue/test/cypress/e2e/example30.cy.ts
@@ -554,10 +554,6 @@ describe('Example 30  Composite Editor Modal', () => {
     cy.get('.slick-editor-modal').should('not.exist');
   });
 
-  it('should not have any row selected after the mass-selection save is over', () => {
-    cy.get('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 0);
-  });
-
   it('should have updated all the changed values BUT only on the 2 selected rows', () => {
     cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(4)`).should('contain', '51');
     cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(7)`)
diff --git a/docs/grid-functionalities/Composite-Editor-Modal.md b/docs/grid-functionalities/Composite-Editor-Modal.md
@@ -265,6 +265,16 @@ this.compositeEditorInstance?.openDetails({
 });
 ```
 
+### onDispose
+The `onDispose` callback function notifies you that the editor is finished and being disposed. It gets called regardless of whether there are changes or not.
+```ts
+this.compositeEditorInstance?.openDetails({
+  headerTitle: 'Create Item',
+  modalType: 'create',
+  onDispose: () => console.log('editor removed'),
+});
+```
+
 ### onError
 The `onError` callback function will execute anytime an error is thrown by the modal window.
 You can return a synchronous or asynchronous function (typically the latter), for example we could display an alert when leaving with unsaved data.
diff --git a/frameworks/angular-slickgrid/docs/grid-functionalities/Composite-Editor-Modal.md b/frameworks/angular-slickgrid/docs/grid-functionalities/Composite-Editor-Modal.md
@@ -194,6 +194,16 @@ this.compositeEditorInstance?.openDetails({
 });
 ```
 
+### onDispose
+The `onDispose` callback function notifies you that the editor is finished and being disposed. It gets called regardless of whether there are changes or not.
+```ts
+this.compositeEditorInstance?.openDetails({
+  headerTitle: 'Create Item',
+  modalType: 'create',
+  onDispose: () => console.log('editor removed'),
+});
+```
+
 ### onError
 The `onError` callback function will execute anytime an error is thrown by the modal window.
 You can return a synchronous or asynchronous function (typically the latter), for example we could display an alert when leaving with unsaved data.
diff --git a/frameworks/angular-slickgrid/test/cypress/e2e/example30.cy.ts b/frameworks/angular-slickgrid/test/cypress/e2e/example30.cy.ts
@@ -557,10 +557,6 @@ describe('Example 30  Composite Editor Modal', () => {
     cy.get('.slick-editor-modal').should('not.exist');
   });
 
-  it('should not have any row selected after the mass-selection save is over', () => {
-    cy.get('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 0);
-  });
-
   it('should have updated all the changed values BUT only on the 2 selected rows', () => {
     cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(4)`).should('contain', '51');
     cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(7)`)
diff --git a/frameworks/aurelia-slickgrid/docs/grid-functionalities/composite-editor-modal.md b/frameworks/aurelia-slickgrid/docs/grid-functionalities/composite-editor-modal.md
@@ -194,6 +194,16 @@ this.compositeEditorInstance?.openDetails({
 });
 ```
 
+### onDispose
+The `onDispose` callback function notifies you that the editor is finished and being disposed. It gets called regardless of whether there are changes or not.
+```ts
+this.compositeEditorInstance?.openDetails({
+  headerTitle: 'Create Item',
+  modalType: 'create',
+  onDispose: () => console.log('editor removed'),
+});
+```
+
 ### onError
 The `onError` callback function will execute anytime an error is thrown by the modal window.
 You can return a synchronous or asynchronous function (typically the latter), for example we could display an alert when leaving with unsaved data.
diff --git a/frameworks/slickgrid-react/docs/grid-functionalities/composite-editor-modal.md b/frameworks/slickgrid-react/docs/grid-functionalities/composite-editor-modal.md
@@ -205,6 +205,16 @@ compositeEditorInstance?.openDetails({
 });
 ```
 
+### onDispose
+The `onDispose` callback function notifies you that the editor is finished and being disposed. It gets called regardless of whether there are changes or not.
+```ts
+this.compositeEditorInstance?.openDetails({
+  headerTitle: 'Create Item',
+  modalType: 'create',
+  onDispose: () => console.log('editor removed'),
+});
+```
+
 ### onError
 The `onError` callback function will execute anytime an error is thrown by the modal window.
 You can return a synchronous or asynchronous function (typically the latter), for example we could display an alert when leaving with unsaved data.
diff --git a/frameworks/slickgrid-vue/docs/grid-functionalities/composite-editor-modal.md b/frameworks/slickgrid-vue/docs/grid-functionalities/composite-editor-modal.md
@@ -207,6 +207,16 @@ compositeEditorInstance?.openDetails({
 });
 ```
 
+### onDispose
+The `onDispose` callback function notifies you that the editor is finished and being disposed. It gets called regardless of whether there are changes or not.
+```ts
+this.compositeEditorInstance?.openDetails({
+  headerTitle: 'Create Item',
+  modalType: 'create',
+  onDispose: () => console.log('editor removed'),
+});
+```
+
 ### onError
 The `onError` callback function will execute anytime an error is thrown by the modal window.
 You can return a synchronous or asynchronous function (typically the latter), for example we could display an alert when leaving with unsaved data.
diff --git a/package.json b/package.json
@@ -137,4 +137,4 @@
     "type": "ko_fi",
     "url": "https://ko-fi.com/ghiscoding"
   }
-}
+}
diff --git a/packages/common/src/interfaces/compositeEditorOpenDetailOption.interface.ts b/packages/common/src/interfaces/compositeEditorOpenDetailOption.interface.ts
@@ -104,6 +104,12 @@ export interface CompositeEditorOpenDetailOption {
    */
   onClose?: () => Promise<boolean>;
 
+  /**
+   * onDispose callback allows user to execute something when the modal is disposed (closed and removed from the DOM).
+   * This will be called regardless of whether there are changes done in the form or not.
+   */
+  onDispose?: () => void;
+
   /** onError callback allows user to override what the system does when an error (error message & type) is thrown, defaults to console.log */
   onError?: (error: OnErrorOption) => void;
 
diff --git a/packages/composite-editor-component/src/slick-composite-editor.component.spec.ts b/packages/composite-editor-component/src/slick-composite-editor.component.spec.ts
@@ -743,6 +743,30 @@ describe('CompositeEditorService', () => {
       expect(cancelSpy).not.toHaveBeenCalled();
     });
 
+    it('should execute "onDispose" callback when user cancels the modal without changes when "onDispose" callback is defined', () => {
+      const mockProduct = { id: 222, address: { zip: 123456 }, productName: 'Product ABC', price: 12.55 };
+      vi.spyOn(gridStub, 'getDataItem').mockReturnValue(mockProduct);
+
+      const mockOnDispose = vi.fn();
+      const mockModalOptions = { headerTitle: 'Details', modalType: 'edit', onDispose: mockOnDispose } as CompositeEditorOpenDetailOption;
+      const spyOnDispose = vi.spyOn(mockModalOptions, 'onDispose');
+      component = new SlickCompositeEditorComponent();
+      component.init(gridStub, container);
+      component.openDetails(mockModalOptions);
+
+      const compositeContainerElm = document.querySelector('div.slick-editor-modal.slickgrid_123456') as HTMLSelectElement;
+      const compositeFooterElm = compositeContainerElm.querySelector('.slick-editor-modal-footer') as HTMLSelectElement;
+      const compositeFooterCancelBtnElm = compositeFooterElm.querySelector('.btn-cancel') as HTMLSelectElement;
+      compositeFooterCancelBtnElm.click();
+
+      vi.runAllTimers();
+
+      expect(component).toBeTruthy();
+      expect(component.eventHandler).toBeTruthy();
+      expect(component.constructor).toBeDefined();
+      expect(spyOnDispose).toHaveBeenCalled();
+    });
+
     it('should pass a Header Title that has to be parsed from the dataContext object', () => {
       const mockProduct = { id: 222, address: { zip: 123456 }, product: { name: 'Product ABC', price: 12.55 } };
       vi.spyOn(gridStub, 'getDataItem').mockReturnValue(mockProduct);
diff --git a/packages/composite-editor-component/src/slick-composite-editor.component.ts b/packages/composite-editor-component/src/slick-composite-editor.component.ts
@@ -20,6 +20,7 @@ import type {
   SlickDataView,
   SlickEventData,
   SlickGrid,
+  SlickRange,
   TranslaterService,
 } from '@slickgrid-universal/common';
 import {
@@ -62,6 +63,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
   protected _editorContainers!: Array<HTMLElement | null>;
   protected _modalBodyTopValidationElm!: HTMLDivElement;
   protected _modalSaveButtonElm!: HTMLButtonElement;
+  protected _selectedRanges: SlickRange[] = [];
   protected grid!: SlickGrid;
   protected gridService: GridService | null = null;
   protected translaterService?: TranslaterService | null;
@@ -127,9 +129,13 @@ export class SlickCompositeEditorComponent implements ExternalResource {
 
   /** Dispose of the Component & unsubscribe all events */
   dispose(): void {
+    this.restoreSelectedRanges();
     this._eventHandler.unsubscribeAll();
     this._bindEventService.unbindAll();
     this._formValues = null;
+    if (typeof this._options?.onDispose === 'function') {
+      this._options.onDispose();
+    }
     this.disposeComponent();
   }
 
@@ -347,6 +353,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
         const fullDatasetLength = this.dataView?.getItemCount() ?? 0;
         this._lastActiveRowNumber = activeRow;
         const dataContextIds = this.dataView.getAllSelectedIds();
+        this._selectedRanges = this.grid.getSelectionModel()?.getSelectedRanges() || [];
 
         // focus on a first cell with an Editor (unless current cell already has an Editor then do nothing)
         // also when it's a "Create" modal, we'll scroll to the end of the grid
@@ -362,6 +369,8 @@ export class SlickCompositeEditorComponent implements ExternalResource {
           return null;
         }
 
+        this.restoreSelectedRanges();
+
         if (modalType === 'edit' && !dataContext) {
           onError({ type: 'warning', code: 'ROW_NOT_EDITABLE', message: 'Current row is not editable.' });
           return null;
@@ -625,6 +634,14 @@ export class SlickCompositeEditorComponent implements ExternalResource {
   // protected methods
   // ----------------
 
+  /** Set the selected ranges back to how they were before editing */
+  protected restoreSelectedRanges(): void {
+    // On mass-update, it would be strange to keep the selection, because the
+    // editor operates on all rows, ignoring the selection.
+    const ranges = this._options?.modalType === 'mass-update' ? [] : this._selectedRanges;
+    this.grid.getSelectionModel()?.setSelectedRanges(ranges);
+  }
+
   /** Apply Mass Update Changes (form values) to the entire dataset */
   protected applySaveMassUpdateChanges(formValues: any, _selection: DataSelection, applyToDataview = true): any[] {
     // not applying to dataView means that we're doing a preview of dataset and we should use a deep copy of it instead of applying changes directly to it
@@ -1005,8 +1022,9 @@ export class SlickCompositeEditorComponent implements ExternalResource {
   /** Check wether the grid has the Row Selection enabled */
   protected hasRowSelectionEnabled(): boolean {
     const selectionModel = this.grid.getSelectionModel();
-    const isRowSelectionEnabled = this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector;
-    return !!(isRowSelectionEnabled && selectionModel);
+    // Either the CellSelectionModel or the RowSelectionModel must be active for
+    // the grid to return the selected rows.
+    return !!selectionModel;
   }
 
   /** Reset Form button handler */
diff --git a/test/cypress/e2e/example12.cy.ts b/test/cypress/e2e/example12.cy.ts
@@ -667,10 +667,6 @@ describe('Example 12 - Composite Editor Modal', () => {
     cy.get('.slick-editor-modal').should('not.exist');
   });
 
-  it('should not have any row selected after the mass-selection save is over', () => {
-    cy.get('.slick-row').children().filter('.slick-cell-checkboxsel.selected.true').should('have.length', 0);
-  });
-
   it('should have updated all the changed values BUT only on the 2 selected rows', () => {
     cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(4)`).should('contain', '51');
     cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(7)`)

Original file line number	Diff line number	Diff line change
`@@ -137,4 +137,4 @@`
`137`	`137`	`"type": "ko_fi",`
`138`	`138`	`"url": "https://ko-fi.com/ghiscoding"`
`139`	`139`	`}`
`140`		`-}`
	`140`	`+}`