Add Grid Menu ClearFilter & ToggleFilter by default. Also destroy controls & plugins when changing route.

Author: Ghislain Beaulac

src/app/modules/angular-slickgrid/services/controlAndPlugin.service.ts

@@ -1,52 +1,66 @@
+import { Injectable } from '@angular/core';
+import { Router, NavigationEnd, NavigationStart } from '@angular/router';
+import { FilterService } from './filter.service';
 import { CellArgs, Column, GridOption } from './../models';
 
 // using external js modules in Angular
 declare var Slick: any;
 
+@Injectable()
 export class ControlAndPluginService {
+  _dataView: any;
   _grid: any;
   _visibleColumns: Column[];
 
+  // controls & plugins
+  autoTooltipPlugin;
+  columnPickerControl;
+  headerButtonsPlugin;
+  headerMenuPlugin;
+  gridMenuControl;
+  rowSelectionPlugin;
+
+  constructor(private filterService: FilterService, private router: Router) {}
+
   attachDifferentControlOrPlugins(grid: any, columnDefinitions: Column[], options: GridOption, dataView: any) {
     this._visibleColumns = columnDefinitions;
+    this._dataView = dataView;
     this._grid = grid;
 
     if (options.enableColumnPicker) {
-      const columnPickerControl = new Slick.Controls.ColumnPicker(columnDefinitions, grid, options);
+      this.columnPickerControl = new Slick.Controls.ColumnPicker(columnDefinitions, grid, options);
     }
     if (options.enableGridMenu) {
-      options.gridMenu = options.gridMenu || {};
-      options.gridMenu.columnTitle = options.gridMenu.columnTitle || 'Columns';
-      options.gridMenu.iconCssClass = options.gridMenu.iconCssClass || 'fa fa-bars';
-      options.gridMenu.menuWidth = options.gridMenu.menuWidth || 18;
-      options.gridMenu.resizeOnShowHeaderRow = options.showHeaderRow;
-
-      const gridMenuControl = new Slick.Controls.GridMenu(columnDefinitions, grid, options);
-      gridMenuControl.onCommand.subscribe((e: Event, args: CellArgs) => {
+      this.prepareGridMenu(options);
+
+      this.gridMenuControl = new Slick.Controls.GridMenu(columnDefinitions, grid, options);
+      this.gridMenuControl.onCommand.subscribe((e: Event, args: CellArgs) => {
         if (typeof options.onGridMenuCommand === 'function') {
           options.onGridMenuCommand(e, args);
         }
       });
     }
     if (options.enableAutoTooltip) {
-      grid.registerPlugin(new Slick.AutoTooltips(options.autoTooltipOptions || {}));
+      this.autoTooltipPlugin = new Slick.AutoTooltips(options.autoTooltipOptions || {});
+      grid.registerPlugin(this.autoTooltipPlugin);
     }
     if (options.enableRowSelection) {
-      grid.setSelectionModel(new Slick.RowSelectionModel(options.rowSelectionOptions || {}));
+      this.rowSelectionPlugin = new Slick.RowSelectionModel(options.rowSelectionOptions || {});
+      grid.setSelectionModel(this.rowSelectionPlugin);
     }
     if (options.enableHeaderButton) {
-      const headerButtonsPlugin = new Slick.Plugins.HeaderButtons(options.headerButtonOptions || {});
-      grid.registerPlugin(headerButtonsPlugin);
-      headerButtonsPlugin.onCommand.subscribe((e: Event, args: CellArgs) => {
+      this.headerButtonsPlugin = new Slick.Plugins.HeaderButtons(options.headerButtonOptions || {});
+      grid.registerPlugin(this.headerButtonsPlugin);
+      this.headerButtonsPlugin.onCommand.subscribe((e: Event, args: CellArgs) => {
         if (typeof options.onHeaderButtonCommand === 'function') {
           options.onHeaderButtonCommand(e, args);
         }
       });
     }
     if (options.enableHeaderMenu) {
-      const headerMenuPlugin = new Slick.Plugins.HeaderMenu(options.headerMenuOptions || {});
-      grid.registerPlugin(headerMenuPlugin);
-      headerMenuPlugin.onCommand.subscribe((e: Event, args: CellArgs) => {
+      this.headerMenuPlugin = new Slick.Plugins.HeaderMenu(options.headerMenuOptions || {});
+      grid.registerPlugin(this.headerMenuPlugin);
+      this.headerMenuPlugin.onCommand.subscribe((e: Event, args: CellArgs) => {
         if (typeof options.onHeaderMenuCommand === 'function') {
           options.onHeaderMenuCommand(e, args);
         }
@@ -61,6 +75,18 @@ export class ControlAndPluginService {
         grid.registerPlugin(options.registerPlugins);
       }
     }
+
+    // destroy all the Controls & Plugins when changing Route
+    this.router.events.subscribe((event: NavigationEnd) => {
+      this.columnPickerControl.destroy();
+      this.gridMenuControl.destroy();
+
+      /* The following plugins destroy are causing a page reload, not sure why, will leave commented out until I find why */
+      // this.autoTooltipPlugin.destroy();
+      // this.headerButtonsPlugin.destroy();
+      // this.headerMenuPlugin.destroy();
+      // this.rowSelectionPlugin.destroy();
+    });
   }
 
   hideColumn(column: Column) {
@@ -78,4 +104,58 @@ export class ControlAndPluginService {
   autoResizeColumns() {
     this._grid.autosizeColumns();
   }
+
+  private addGridMenuCustomCommands(options: GridOption) {
+    if (options.enableFiltering) {
+      if (options.gridMenu.customItems.filter((item) => item.command === 'clear-filter').length === 0) {
+        options.gridMenu.customItems.push(
+          {
+            iconCssClass: 'fa fa-filter text-danger',
+            title: 'Clear All Filters',
+            disabled: false,
+            command: 'clear-filter'
+          }
+        );
+      }
+      if (options.gridMenu.customItems.filter((item) => item.command === 'toggle-filter').length === 0) {
+        options.gridMenu.customItems.push(
+          {
+            iconCssClass: 'fa fa-random',
+            title: 'Toggle Filter Row',
+            disabled: false,
+            command: 'toggle-filter'
+          }
+        );
+      }
+      options.onGridMenuCommand = (e, args) => {
+        if (args.command === 'toggle-filter') {
+          this._grid.setHeaderRowVisibility(!this._grid.getOptions().showHeaderRow);
+        } else if (args.command === 'toggle-toppanel') {
+          this._grid.setTopPanelVisibility(!this._grid.getOptions().showTopPanel);
+        } else if (args.command === 'clear-filter') {
+          this.filterService.clearFilters();
+          this._dataView.refresh();
+        } else {
+          alert('Command: ' + args.command);
+        }
+      };
+    }
+
+    // remove the custom command title if there's no command
+    if (options.gridMenu.customItems && options.gridMenu.customItems.length > 0) {
+      options.gridMenu.customTitle = options.gridMenu.customTitle || 'Commands';
+    }
+  }
+
+  private prepareGridMenu(options) {
+    options.gridMenu = options.gridMenu || {};
+    options.gridMenu.columnTitle = options.gridMenu.columnTitle || 'Columns';
+    options.gridMenu.iconCssClass = options.gridMenu.iconCssClass || 'fa fa-bars';
+    options.gridMenu.menuWidth = options.gridMenu.menuWidth || 18;
+    options.gridMenu.customTitle = options.gridMenu.customTitle || null;
+    options.gridMenu.customItems = options.gridMenu.customItems || [];
+    this.addGridMenuCustomCommands(options);
+
+    options.gridMenu.resizeOnShowHeaderRow = options.showHeaderRow;
+  }
 }