feat(filter): add collectionLazy callback to Column Filter (#1344)

Author: ghiscoding

docs/README.md

@@ -2,4 +2,4 @@
 
 The [`docs`](https://github.com/ghiscoding/aurelia-slickgrid/tree/master/docs) folder of Aurelia-Slickgrid is the one-stop-shop for all project related documentation.
 
-Feel free to contribution documentation fixes by editing any of the markdown files in the [`docs`](https://github.com/ghiscoding/aurelia-slickgrid/tree/master/docs) folder.
+Feel free to contribute documentation fixes by editing any of the markdown files located in the [`docs`](https://github.com/ghiscoding/aurelia-slickgrid/tree/master/docs) folder.

docs/column-functionalities/editors/select-dropdown-editor.md

@@ -173,7 +173,7 @@ this.columnDefinitions = [
 ```
 
 ### Collection Watch
-Sometime you wish that whenever you change your filter collection, you'd like the filter to be updated, it won't do that by default but you could use `enableCollectionWatch` for that purpose to add collection observers and re-render the Filter DOM element whenever the collection changes. Also note that using `collectionAsync` will automatically watch for changes, so there's no need to enable this flag for that particular use case.
+Sometime you wish that whenever you make a change in your filter collection, you'd like the filter to be updated but it won't do that by default. You could use `enableCollectionWatch` for that purpose which will add a collection observers and re-render the Filter DOM element whenever the collection changes. Also note that using `collectionAsync` will automatically watch for changes, so there's no need to enable this flag for that particular use case.
 
 ```typescript
 this.columnDefinitions = [

docs/column-functionalities/filters/select-filter.md

@@ -6,15 +6,16 @@
 - [How to add Translation](#how-to-add-translation)
 - [How to filter empty values](#how-to-filter-empty-values)
 - Collection Options
-   - [Add Blank Entry](#collection-add-blank-entry)
-   - [Add Custom Entry at Beginning/End of Collection](#collection-add-custom-entry-at-the-beginningend-of-the-collection)
-   - [Custom Structure](#custom-structure-keylabel-pair)
-   - [Custom Structure with Translation](#custom-structure-with-translation)
-   - [Collection filterBy/sortBy](#collection-filterbysortby)
-   - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix)
-   - [Collection Label Render HTML](#collection-label-render-html)
-   - [Collection Async Load](#collection-async-load)
-   - [Collection Watch](#collection-watch)
+  - [Add Blank Entry](#collection-add-blank-entry)
+  - [Add Custom Entry at Beginning/End of Collection](#collection-add-custom-entry-at-the-beginningend-of-the-collection)
+  - [Custom Structure](#custom-structure-keylabel-pair)
+  - [Custom Structure with Translation](#custom-structure-with-translation)
+  - [Collection filterBy/sortBy](#collection-filterbysortby)
+  - [Collection Label Prefix/Suffix](#collection-label-prefixsuffix)
+  - [Collection Label Render HTML](#collection-label-render-html)
+  - [Collection Async Load](#collection-async-load)
+  - [Collection Lazy Load](#collection-lazy-load)
+  - [Collection Watch](#collection-watch)
 - [`multiple-select.js` Options](#multiple-selectjs-options)
   - [Filter Options (`MultipleSelectOption` interface)](#filter-options-multipleselectoption-interface)
   - [Display shorter selected label text](#display-shorter-selected-label-text)
@@ -539,6 +540,24 @@ For example
   }
 ```
 
+### Collection Lazy Load
+In some cases, you might have a grid with a lot of columns and loading the collection only after opening the select dropdown (or never in some cases) might help speeding up the initial grid loading. So for that use case, defining a `collectionLazy` callback can help.
+
+#### Load the collection through an Http callback
+
+```ts
+this.columnDefinitions = [
+    {
+    id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites',
+    filterable: true,
+    filter: {
+      collectionLazy: (col: Column) => this.http.fetch('api/data/pre-requisites'),
+      model: Filters.multipleSelect,
+    }
+  }
+];
+```
+
 ### Collection Watch
 We can enable the collection watch via the column filter `enableCollectionWatch` flag, or if you use a `collectionAsync` then this will be enabled by default. The collection watch will basically watch for any changes applied to the collection (any mutation changes like `push`, `pop`, `unshift`, ...) and will also watch for the `filter.collection` array replace, when any changes happens then it will re-render the Select Filter with the updated collection list.
 

package.json

@@ -49,7 +49,7 @@
     "@jest/types": "^29.6.3",
     "@lerna-lite/cli": "^4.0.0",
     "@lerna-lite/publish": "^4.0.0",
-    "@slickgrid-universal/common": "^5.13.4",
+    "@slickgrid-universal/common": "^5.14.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.15.2",
     "conventional-changelog-conventionalcommits": "^8.0.0",

packages/aurelia-slickgrid/package.json

@@ -53,12 +53,12 @@
     "@aurelia/runtime": "^2.0.0-beta.23",
     "@aurelia/runtime-html": "^2.0.0-beta.23",
     "@formkit/tempo": "^0.1.2",
-    "@slickgrid-universal/common": "~5.13.4",
-    "@slickgrid-universal/custom-footer-component": "~5.13.4",
-    "@slickgrid-universal/empty-warning-component": "~5.13.4",
+    "@slickgrid-universal/common": "~5.14.0",
+    "@slickgrid-universal/custom-footer-component": "~5.14.0",
+    "@slickgrid-universal/empty-warning-component": "~5.14.0",
     "@slickgrid-universal/event-pub-sub": "~5.13.0",
-    "@slickgrid-universal/pagination-component": "~5.13.4",
-    "@slickgrid-universal/row-detail-view-plugin": "~5.13.4",
+    "@slickgrid-universal/pagination-component": "~5.14.0",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.14.0",
     "@slickgrid-universal/utils": "~5.12.0",
     "dequal": "^2.0.3",
     "sortablejs": "^1.15.6"

packages/demo/package.json

@@ -43,15 +43,15 @@
     "@fnando/sparkline": "^0.3.10",
     "@formkit/tempo": "^0.1.2",
     "@popperjs/core": "^2.11.8",
-    "@slickgrid-universal/common": "^5.13.4",
-    "@slickgrid-universal/composite-editor-component": "^5.13.4",
-    "@slickgrid-universal/custom-tooltip-plugin": "^5.13.4",
-    "@slickgrid-universal/excel-export": "^5.13.4",
-    "@slickgrid-universal/graphql": "^5.13.4",
-    "@slickgrid-universal/odata": "^5.13.4",
-    "@slickgrid-universal/row-detail-view-plugin": "^5.13.4",
-    "@slickgrid-universal/rxjs-observable": "^5.13.4",
-    "@slickgrid-universal/text-export": "^5.13.4",
+    "@slickgrid-universal/common": "^5.14.0",
+    "@slickgrid-universal/composite-editor-component": "^5.14.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "^5.14.0",
+    "@slickgrid-universal/excel-export": "^5.14.0",
+    "@slickgrid-universal/graphql": "^5.14.0",
+    "@slickgrid-universal/odata": "^5.14.0",
+    "@slickgrid-universal/row-detail-view-plugin": "^5.14.0",
+    "@slickgrid-universal/rxjs-observable": "^5.14.0",
+    "@slickgrid-universal/text-export": "^5.14.0",
     "aurelia": "^2.0.0-beta.23",
     "aurelia-slickgrid": "workspace:*",
     "bootstrap": "^5.3.5",

packages/demo/src/examples/slickgrid/example33.html

@@ -19,9 +19,14 @@ <h2>
 
 <div class="subtitle" innerhtml.bind="subTitle"></div>
 
-<div style="margin-bottom: 20px;">
-  <label for="pinned-rows">Simulated Server Delay (ms): </label>
-  <input type="number" id="server-delay" data-test="server-delay" style="width: 60px" value.bind="serverApiDelay" />
+<div class="row">
+  <div class="col" style="margin-bottom: 20px">
+    <label for="pinned-rows">Simulated Server Delay (ms): </label>
+    <input type="number" id="server-delay" data-test="server-delay" style="width: 60px" value.bind="serverApiDelay" />
+  </div>
+  <div class="alert alert-info is-narrow col" class.bind="{ invisible: !showLazyLoading }" data-test="alert-lazy">
+    Lazy loading collection...
+  </div>
 </div>
 
 <aurelia-slickgrid grid-id="grid33"

packages/demo/src/examples/slickgrid/example33.ts

@@ -18,7 +18,7 @@ import {
 } from 'aurelia-slickgrid';
 import './example33.scss';
 
-const NB_ITEMS = 500;
+const NB_ITEMS = 1000;
 
 export class Example33 {
   title = 'Example 33: Regular & Custom Tooltips';
@@ -39,6 +39,7 @@ export class Example33 {
   dataset: any[] = [];
   hideSubTitle = false;
   serverApiDelay = 500;
+  showLazyLoading = false;
 
   constructor() {
     // define the grid options & columns and then create the grid itself
@@ -257,18 +258,32 @@ export class Example33 {
         },
         filter: {
           // collectionAsync: fetch(SAMPLE_COLLECTION_DATA_URL),
-          collectionAsync: new Promise((resolve) => {
-            window.setTimeout(() => {
-              resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
+          // collectionAsync: new Promise((resolve) => {
+          //   window.setTimeout(() => {
+          //     resolve(Array.from(Array(dataset.value?.length).keys()).map((k) => ({ value: k, label: `Task ${k}` })));
+          //   });
+          // }),
+          collectionLazy: () => {
+            this.showLazyLoading = true;
+
+            return new Promise((resolve) => {
+              window.setTimeout(() => {
+                this.showLazyLoading = false;
+                resolve(Array.from(Array((this.dataset || []).length).keys()).map((k) => ({ value: k, label: `Task ${k}` })));
+              }, this.serverApiDelay);
             });
-          }),
+          },
+          // onInstantiated: (msSelect) => console.log('ms-select instance', msSelect),
           customStructure: {
             label: 'label',
             value: 'value',
             labelPrefix: 'prefix',
           },
           collectionOptions: {
-            separatorBetweenTextLabels: ' '
+            separatorBetweenTextLabels: ' ',
+          },
+          filterOptions: {
+            minHeight: 70,
           },
           model: Filters.multipleSelect,
           operator: OperatorType.inContains,

packages/demo/src/styles.scss

@@ -43,6 +43,10 @@ $primary-color: #0e6cfa;
   display: none;
 }
 
+.invisible {
+  opacity: 0;
+}
+
 .btn-icon {
   display: inline-flex;
   align-items: center;