feat(dataView): add option to apply row selection to all pages (#882)

* feat(dataView): add option to apply row selection to all pages
ghiscoding · Feb 4, 2023 · 4aac7cb · 4aac7cb
1 parent 9f525e1
commit 4aac7cb
Show file tree

Hide file tree

Showing 28 changed files with 573 additions and 521 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -29,7 +29,7 @@
         "--runInBand",
         "${fileBasename}",
         "--config",
-        "${workspaceFolder}/test/jest.config.js"
+        "${workspaceFolder}/test/jest.config.ts"
       ],
       "console": "internalConsole",
       "internalConsoleOptions": "neverOpen",

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts
@@ -470,7 +470,7 @@ export default class Example11 {
   }
 
   remoteCallbackFn(args: { item: any, selectedIds: string[], updateType: 'selection' | 'mass' }) {
-    const fields: Array<{ fieldName: string; value: any;}> = [];
+    const fields: Array<{ fieldName: string; value: any; }> = [];
     for (const key in args.item) {
       if (args.item.hasOwnProperty(key)) {
         fields.push({ fieldName: key, value: args.item[key] });
@@ -675,6 +675,7 @@ export default class Example11 {
     this.sgb.gridStateService.resetToOriginalColumns();
     this.sgb.filterService.clearFilters();
     this.sgb.sortService.clearSorting();
+    this.sgb.gridService.clearPinning();
   }
 
   async updateView(event: DOMEvent<HTMLInputElement>) {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts
@@ -133,6 +133,7 @@ export class Example12 {
     this._bindingEventService.bind(this.gridContainerElm, 'oncompositeeditorchange', this.handleOnCompositeEditorChange.bind(this));
     this._bindingEventService.bind(this.gridContainerElm, 'onpaginationchanged', this.handleReRenderUnsavedStyling.bind(this));
     this._bindingEventService.bind(this.gridContainerElm, 'onfilterchanged', this.handleReRenderUnsavedStyling.bind(this));
+    this._bindingEventService.bind(this.gridContainerElm, 'onselectedrowidschanged', this.handleOnSelectedRowIdsChanged.bind(this));
   }
 
   dispose() {
@@ -433,8 +434,8 @@ export class Example12 {
       headerRowHeight: 35,
       enableCheckboxSelector: true,
       enableRowSelection: true,
-      multiSelect: false,
       checkboxSelector: {
+        applySelectOnAllPages: true,
         hideInFilterHeaderRow: false,
         hideInColumnTitleRow: true,
       },
@@ -623,6 +624,12 @@ export class Example12 {
     }
   }
 
+  handleOnSelectedRowIdsChanged(event) {
+    const args = event?.detail?.args;
+    // const sortedSelectedIds = args.filteredIds.sort((a, b) => a - b);
+    console.log('sortedSelectedIds', args.filteredIds.length, args.selectedRowIds.length);
+  }
+
   toggleGridEditReadonly() {
     // first need undo all edits
     this.undoAllEdits();

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example14.html b/examples/webpack-demo-vanilla-bundle/src/examples/example14.html
@@ -49,7 +49,7 @@ <h4 class="title is-4">Container Width (1000px)</h4>
     <p class="control">
       <button class="button is-small" onclick.delegate="toggleGridEditReadonly()" data-test="toggle-readonly-btn">
         <span class="icon mdi mdi-table-edit"></span>
-        <span>Toggle Edit/Readonly Grid</span>
+        <span>Toggle Readonly</span>
       </button>
     </p>
     <p class="control">
@@ -65,6 +65,12 @@ <h4 class="title is-4">Container Width (1000px)</h4>
         <span>Save All</span>
       </button>
     </p>
+    <p class="control">
+      <button class="button is-small" onclick.delegate="setSelectedRowIds()" data-test="set-dynamic-rows-btn"
+              title="Change Row Selection across multiple pages">
+        <span>Change Row Selection</span>
+      </button>
+    </p>
     <span class.bind="loadingClass"></span>
   </div>
 </div>

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts
@@ -19,14 +19,15 @@ import {
   // utilities
   formatNumber,
   Utilities,
+  GridStateChange,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickerGridInstance, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import { ExampleGridOptions } from './example-grid-options';
 import './example14.scss';
 
-const NB_ITEMS = 5000;
+const NB_ITEMS = 400;
 
 // using external SlickGrid JS libraries
 declare const Slick: SlickNamespace;
@@ -122,6 +123,8 @@ export class Example14 {
     this._bindingEventService.bind(this.gridContainerElm, 'onpaginationchanged', this.handlePaginationChanged.bind(this));
     this._bindingEventService.bind(this.gridContainerElm, 'onbeforeresizebycontent', this.showSpinner.bind(this));
     this._bindingEventService.bind(this.gridContainerElm, 'onafterresizebycontent', this.hideSpinner.bind(this));
+    this._bindingEventService.bind(this.gridContainerElm, 'onselectedrowidschanged', this.handleOnSelectedRowIdsChanged.bind(this));
+    this._bindingEventService.bind(this.gridContainerElm, 'ongridstatechanged', this.handleOnGridStateChanged.bind(this));
   }
 
   dispose() {
@@ -361,8 +364,14 @@ export class Example14 {
       autoResize: {
         container: '.grid-container',
         resizeDetection: 'container',
+        minHeight: 250
       },
       enableAutoResize: true,
+      enablePagination: true,
+      pagination: {
+        pageSize: 10,
+        pageSizes: [10, 200, 500, 5000]
+      },
 
       // resizing by cell content is opt-in
       // we first need to disable the 2 default flags to autoFit/autosize
@@ -383,6 +392,7 @@ export class Example14 {
       enableRowSelection: true,
       enableCheckboxSelector: true,
       checkboxSelector: {
+        applySelectOnAllPages: true, // already defaults to true
         hideInFilterHeaderRow: false,
         hideInColumnTitleRow: true,
       },
@@ -474,6 +484,12 @@ export class Example14 {
     return tmpArray;
   }
 
+  handleOnGridStateChanged(event) {
+    // console.log('handleOnGridStateChanged', event?.detail ?? '')
+    const gridStateChanges: GridStateChange = event?.detail;
+    console.log('Grid State changed::', gridStateChanges);
+  }
+
   handleValidationError(event) {
     console.log('handleValidationError', event.detail);
     const args = event.detail && event.detail.args;
@@ -545,6 +561,11 @@ export class Example14 {
     this.classNewResizeButton = 'button is-small is-selected is-primary';
   }
 
+  handleOnSelectedRowIdsChanged(event) {
+    const args = event?.detail?.args ?? {};
+    console.log('Selected Ids:', args.selectedRowIds);
+  }
+
   toggleGridEditReadonly() {
     // first need undo all edits
     this.undoAllEdits();
@@ -616,6 +637,19 @@ export class Example14 {
     this.editedItems = {};
   }
 
+  // change row selection dynamically and apply it to the DataView and the Grid UI
+  setSelectedRowIds() {
+    // change row selection even across multiple pages via DataView
+    this.sgb.dataView?.setSelectedIds([3, 4, 11]);
+
+    // you can also provide optional options (all defaults to true)
+    // this.sgb.dataView?.setSelectedIds([4, 5, 8, 10], {
+    //   isRowBeingAdded: true,
+    //   shouldTriggerEvent: true,
+    //   applyGridRowSelection: true
+    // });
+  }
+
   undoLastEdit(showLastEditor = false) {
     const lastEdit = this.editQueue.pop();
     const lastEditCommand = lastEdit?.editCommand;

diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
     "rimraf": "^3.0.2",
     "rxjs": "^7.5.7",
     "serve": "^14.2.0",
-    "slickgrid": "^3.0.2",
+    "slickgrid": "^3.0.3",
     "sortablejs": "^1.15.0",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -82,7 +82,7 @@
     "jquery": "^3.6.3",
     "moment-mini": "^2.29.4",
     "multiple-select-modified": "^1.3.17",
-    "slickgrid": "^3.0.2",
+    "slickgrid": "^3.0.3",
     "sortablejs": "^1.15.0",
     "un-flatten-tree": "^2.0.12"
   },