refactor: tweak and fix few styling issues with menus

Author: ghiscoding

src/app/examples/grid-angular.component.ts

@@ -259,6 +259,7 @@ export class GridAngularComponent implements OnInit {
       headerRowHeight: 45,
       rowHeight: 45, // increase row height so that the ng-select fits in the cell
       editable: true,
+      enableCellMenu: true,
       enableCellNavigation: true,
       enableColumnPicker: true,
       enableExcelCopyBuffer: true,
@@ -269,7 +270,6 @@ export class GridAngularComponent implements OnInit {
         this._commandQueue.push(editCommand);
         editCommand.execute();
       },
-      enableCellMenu: true,
       i18n: this.translate,
       params: {
         angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)

src/app/examples/grid-contextmenu.component.ts

@@ -13,8 +13,6 @@ import {
   Formatter,
   Formatters,
   GridOption,
-  SlickCellMenu,
-  SlickContextMenu,
   unsubscribeAllObservables,
 } from './../modules/angular-slickgrid';
 
@@ -110,12 +108,12 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
     this.angularGrid = angularGrid;
   }
 
-  get cellMenuInstance(): SlickCellMenu {
-    return (this.angularGrid?.extensionService?.getExtensionInstanceByName?.(ExtensionName.cellMenu) ?? {});
+  get cellMenuInstance() {
+    return this.angularGrid?.extensionService?.getExtensionInstanceByName(ExtensionName.cellMenu);
   }
 
-  get contextMenuInstance(): SlickContextMenu {
-    return (this.angularGrid?.extensionService?.getExtensionInstanceByName?.(ExtensionName.contextMenu) ?? {});
+  get contextMenuInstance() {
+    return this.angularGrid?.extensionService?.getExtensionInstanceByName(ExtensionName.contextMenu);
   }
 
   ngOnInit() {
@@ -434,7 +432,7 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
       onOptionSelected: ((e, args) => {
         // change Priority
         const dataContext = args && args.dataContext;
-        if (dataContext && dataContext.hasOwnProperty('priority')) {
+        if (dataContext?.hasOwnProperty('priority')) {
           dataContext.priority = args.item.option;
           this.angularGrid.gridService.updateItem(dataContext);
         }
@@ -446,15 +444,15 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
     // when showing both Commands/Options, we can just pass an empty array to show over all columns
     // else show on all columns except Priority
     const showOverColumnIds = showBothList ? [] : ['id', 'title', 'complete', 'start', 'finish', 'completed', 'action'];
-    this.contextMenuInstance.setOptions({
+    this.contextMenuInstance?.setOptions({
       commandShownOverColumnIds: showOverColumnIds,
       // hideCommandSection: !showBothList
     });
   }
 
   showCellMenuCommandsAndOptions(showBothList: boolean) {
     // change via the plugin setOptions
-    this.cellMenuInstance.setOptions({
+    this.cellMenuInstance?.setOptions({
       hideOptionSection: !showBothList
     });
 

src/app/examples/grid-menu.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { AngularGridInstance, Column, ExtensionName, FieldType, Filters, Formatters, GridOption, SlickGridMenu, unsubscribeAllObservables } from './../modules/angular-slickgrid';
+import { AngularGridInstance, Column, ExtensionName, FieldType, Filters, Formatters, GridOption, unsubscribeAllObservables } from './../modules/angular-slickgrid';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 

src/app/examples/grid-rowdetail.component.ts

@@ -32,7 +32,6 @@ export class GridRowDetailComponent implements OnInit {
   columnDefinitions!: Column[];
   gridOptions!: GridOption;
   dataset!: any[];
-  extensions!: ExtensionList<any>;
   detailViewRowCount = 9;
   message = '';
   flashAlertType = 'info';
@@ -49,8 +48,8 @@ export class GridRowDetailComponent implements OnInit {
     // option 1
     return (this.angularGrid.extensions.rowDetailView.instance || {});
 
-    // OR options 2
-    // return (this.angularGrid && this.angularGrid.extensionService.getExtensionInstanceByName(ExtensionName.rowDetailView) || {});
+    // OR option 2
+    // return this.angularGrid?.extensionService.getExtensionInstanceByName(ExtensionName.rowDetailView) || {};
   }
 
   ngOnInit(): void {
@@ -120,7 +119,7 @@ export class GridRowDetailComponent implements OnInit {
 
         // you can override the logic for showing (or not) the expand icon
         // for example, display the expand icon only on every 2nd row
-        // expandableOverride: (row: number, dataContext: any, grid: SlickGrid) => (dataContext.rowId % 2 === 1),
+        // expandableOverride: (row: number, dataContext: any) => (dataContext.rowId % 2 === 1),
 
         // Preload View Component
         preloadComponent: RowDetailPreloadComponent,

src/app/examples/grid-rowmove.component.ts

@@ -32,8 +32,8 @@ export class GridRowMoveComponent implements OnInit {
     this.angularGrid = angularGrid;
   }
 
-  get rowMoveInstance(): SlickRowMoveManager {
-    return (this.angularGrid?.extensionService?.getExtensionInstanceByName?.(ExtensionName.rowMoveManager) ?? {});
+  get rowMoveInstance() {
+    return this.angularGrid?.extensionService?.getExtensionInstanceByName(ExtensionName.rowMoveManager) ?? {};
   }
 
   ngOnInit(): void {

src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts

@@ -1,7 +1,7 @@
 import 'slickgrid/plugins/slick.rowdetailview';
 import 'slickgrid/plugins/slick.rowselectionmodel';
 
-import { ApplicationRef, ComponentRef, Injectable, Type, ViewContainerRef } from '@angular/core';
+import { ApplicationRef, ComponentRef, Type, ViewContainerRef } from '@angular/core';
 import {
   addToArrayWhenNotExists,
   castObservableToPromise,
@@ -13,8 +13,7 @@ import {
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
 import { Observable, Subject, Subscription } from 'rxjs';
-import * as DOMPurify_ from 'dompurify';
-const DOMPurify = DOMPurify_; // patch to fix rollup to work
+import * as DOMPurify from 'dompurify';
 
 import { GridOption, RowDetailView } from '../models/index';
 import { AngularUtilService } from '../services/angularUtil.service';
@@ -29,7 +28,6 @@ export interface CreatedView {
   componentRef?: ComponentRef<any>;
 }
 
-@Injectable()
 export class SlickRowDetailView extends UniversalSlickRowDetailView {
   rowDetailContainer!: ViewContainerRef;
   protected _eventHandler!: SlickEventHandler;