feat(plugins): use new internal slickgrid-universal plugins

- all SlickGrid controls & plugins were moved into Slickgrid-Universal and fully rewritten as vanillaJS
ghiscoding · Nov 12, 2021 · 9ef4651 · 9ef4651
1 parent ffdeb75
commit 9ef4651
Show file tree

Hide file tree

Showing 42 changed files with 2,000 additions and 1,704 deletions.
diff --git a/package.json b/package.json
@@ -88,6 +88,7 @@
     "@slickgrid-universal/empty-warning-component": "^0.19.0",
     "@slickgrid-universal/event-pub-sub": "^0.19.0",
     "@slickgrid-universal/pagination-component": "^0.19.0",
+    "@slickgrid-universal/row-detail-view-plugin": "^0.19.0",
     "@slickgrid-universal/rxjs-observable": "^0.19.0",
     "@types/dompurify": "^2.3.1",
     "@types/jquery": "^3.5.8",
@@ -174,4 +175,4 @@
     "node": ">=14.15.0",
     "npm": ">=6.14.8"
   }
-}
+}
diff --git a/src/app/examples/grid-contextmenu.component.ts b/src/app/examples/grid-contextmenu.component.ts
@@ -13,6 +13,8 @@ import {
   Formatter,
   Formatters,
   GridOption,
+  SlickCellMenu,
+  SlickContextMenu,
   unsubscribeAllObservables,
 } from './../modules/angular-slickgrid';
 
@@ -108,12 +110,12 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
     this.angularGrid = angularGrid;
   }
 
-  get cellMenuInstance(): any {
-    return this.angularGrid?.extensionService?.getSlickgridAddonInstance?.(ExtensionName.cellMenu) ?? {};
+  get cellMenuInstance(): SlickCellMenu {
+    return (this.angularGrid?.extensionService?.getExtensionInstanceByName?.(ExtensionName.cellMenu) ?? {}) as SlickCellMenu;
   }
 
-  get contextMenuInstance(): any {
-    return this.angularGrid?.extensionService?.getSlickgridAddonInstance?.(ExtensionName.contextMenu) ?? {};
+  get contextMenuInstance(): SlickContextMenu {
+    return (this.angularGrid?.extensionService?.getExtensionInstanceByName?.(ExtensionName.contextMenu) ?? {}) as SlickContextMenu;
   }
 
   ngOnInit() {

diff --git a/src/app/examples/grid-draggrouping.component.ts b/src/app/examples/grid-draggrouping.component.ts
@@ -188,7 +188,7 @@ export class GridDraggableGroupingComponent implements OnInit {
         }
       },
       {
-        id: 'effortDriven', name: 'Effort Driven', field: 'effortDriven',
+        id: 'effortDriven', name: 'Effort-Driven', field: 'effortDriven',
         width: 80, minWidth: 20, maxWidth: 100,
         cssClass: 'cell-effort-driven',
         sortable: true,
@@ -218,6 +218,7 @@ export class GridDraggableGroupingComponent implements OnInit {
       createPreHeaderPanel: true,
       showPreHeaderPanel: true,
       preHeaderPanelHeight: 40,
+      showCustomFooter: true,
       enableFiltering: true,
       // you could debounce/throttle the input text filter if you have lots of data
       // filterTypingDebounce: 250,

diff --git a/src/app/examples/grid-frozen.component.ts b/src/app/examples/grid-frozen.component.ts
@@ -56,7 +56,7 @@ export class GridFrozenComponent implements OnInit, OnDestroy {
 
   highlightRow(event: Event, isMouseEnter: boolean) {
     const cell = this.gridObj.getCellFromEvent(event);
-    const rows = isMouseEnter ? [cell.row] : [];
+    const rows = isMouseEnter ? [cell?.row ?? 0] : [];
     this.gridObj.setSelectedRows(rows); // highlight current row
     event.preventDefault();
   }

diff --git a/src/app/examples/grid-graphql.component.ts b/src/app/examples/grid-graphql.component.ts
@@ -135,7 +135,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
       i18n: this.translate,
       gridMenu: {
         resizeOnShowHeaderRow: true,
-        customItems: [
+        commandItems: [
           {
             iconCssClass: 'fa fa-times text-danger',
             title: 'Reset Grid',

diff --git a/src/app/examples/grid-headerbutton.component.html b/src/app/examples/grid-headerbutton.component.html
@@ -11,13 +11,21 @@ <h2>
   </h2>
   <div class="subtitle" [innerHTML]="subTitle"></div>
 
-  <div class="col-sm-12">
-    <angular-slickgrid gridId="grid7"
-                       [columnDefinitions]="columnDefinitions"
-                       [gridOptions]="gridOptions"
-                       [dataset]="dataset"
-                       (onDataviewCreated)="dataviewReady($event.detail)"
-                       (onGridCreated)="gridReady($event.detail)">
-    </angular-slickgrid>
-  </div>
+  <h5>Grid 1</h5>
+  <angular-slickgrid gridId="grid7-1"
+                     [columnDefinitions]="columnDefinitions1"
+                     [gridOptions]="gridOptions1"
+                     [dataset]="dataset1"
+                     (onAngularGridCreated)="angularGrid1Ready($event.detail)">
+  </angular-slickgrid>
+
+  <br />
+  <h5>Grid 2 - <span class="subtitle">with both Header Buttons & Menus</span></h5>
+  <angular-slickgrid gridId="grid7-2"
+                     [columnDefinitions]="columnDefinitions2"
+                     [gridOptions]="gridOptions2"
+                     [dataset]="dataset2"
+                     (onAngularGridCreated)="angularGrid2Ready($event.detail)">
+  </angular-slickgrid>
+
 </div>
diff --git a/src/app/examples/grid-headerbutton.component.scss b/src/app/examples/grid-headerbutton.component.scss
@@ -0,0 +1,10 @@
+/* 1st grid */
+#grid7-1 {
+  --slick-header-button-float: right;
+}
+
+/* 2nd grid */
+#grid7-2 {
+  --slick-header-button-margin: 4px 0 50px 0;
+  --slick-header-button-float: left;
+}