feat(ColPicker/GridMenu): expose new hide flags and onColumnsChanged

Author: Ghislain Beaulac

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

@@ -57,6 +57,13 @@ export class GridMenuComponent implements OnInit {
     this.visibleColumns = this.columnDefinitions;
 
     this.gridOptions = {
+      columnPicker: {
+        hideForceFitButton: true,
+        hideSyncResizeButton: true,
+        onColumnsChanged: (e, args) => {
+          console.log('Column selection changed from Column Picker, visible columns: ', args.columns);
+        }
+      },
       enableAutoResize: true,
       enableGridMenu: true,
       autoResize: {
@@ -69,6 +76,8 @@ export class GridMenuComponent implements OnInit {
         customTitle: 'Custom Commands',
         columnTitle: 'Columns',
         iconCssClass: 'fa fa-ellipsis-v',
+        hideForceFitButton: true,
+        hideSyncResizeButton: true,
         menuWidth: 17,
         resizeOnShowHeaderRow: true,
         customItems: [
@@ -118,6 +127,9 @@ export class GridMenuComponent implements OnInit {
           } else {
             alert('Command: ' + args.command);
           }
+        },
+        onColumnsChanged: (e, args) => {
+          console.log('Column selection changed from Grid Menu, visible columns: ', args.columns);
         }
       },
     };

src/app/modules/angular-slickgrid/global-grid-options.ts

@@ -17,6 +17,10 @@ export const GlobalGridOptions: GridOption = {
   checkboxSelector: {
     cssClass: 'slick-cell-checkboxsel'
   },
+  columnPicker: {
+    hideForceFitButton: false,
+    hideSyncResizeButton: true
+  },
   editable: false,
   enableAutoResize: true,
   enableCellNavigation: false,
@@ -31,6 +35,8 @@ export const GlobalGridOptions: GridOption = {
   exportWithFormatter: false,
   forceFitColumns: false,
   gridMenu: {
+    hideForceFitButton: false,
+    hideSyncResizeButton: true,
     iconCssClass: 'fa fa-bars',
     menuWidth: 16,
     resizeOnShowHeaderRow: false,

src/app/modules/angular-slickgrid/models/columnPicker.interface.ts

@@ -1,5 +1,19 @@
 export interface ColumnPicker {
+  /** Defaults to "Columns" which is the title that shows up over the columns */
   columnTitle?: string;
+
+  /** Defaults to "Force fit columns" which is 1 of the last 2 checkbox title shown at the end of the picker list */
   forceFitTitle?: string;
+
+  /** Defaults to True, show/hide 1 of the last 2 checkbox at the end of the picker list */
+  hideForceFitButton?: boolean;
+
+  /** Defaults to True, show/hide 1 of the last 2 checkbox at the end of the picker list */
+  hideSyncResizeButton?: boolean;
+
+  /** Defaults to "Synchronous resize" which is 1 of the last 2 checkbox title shown at the end of the picker list */
   syncResizeTitle?: string;
+
+  /** SlickGrid Event fired when any of the columns checkbox selection changes. */
+  onColumnsChanged?: (e: Event, args: any) => void;
 }

src/app/modules/angular-slickgrid/models/gridMenu.interface.ts

@@ -1,23 +1,66 @@
 import { CustomGridMenu } from './customGridMenu.interface';
 
 export interface GridMenu {
+  /** Array of Custom Items (title, command, disabled, ...) */
   customItems?: CustomGridMenu[];
+
+  /** Defaults to "Commands" which is the title that shows up over the custom commands list */
   customTitle?: string;
+
+  /** Defaults to "Columns" which is the title that shows up over the columns */
   columnTitle?: string;
+
+  /** Link for the displaying the Grid menu icon image (basically the hamburger menu) */
   iconImage?: string;
+
+  /** CSS class for the displaying the Grid menu icon image (basically the hamburger menu) */
   iconCssClass?: string;
+
+  /** Defaults to False, which leads to leaving the menu open after a click */
   leaveOpen?: boolean;
+
+  /** Defaults to 16 pixels (only the number), which is the width in pixels of the Grid Menu icon */
   menuWidth?: number;
+
+  /** Defaults to "Force fit columns" which is 1 of the last 2 checkbox title shown at the end of the picker list */
   forceFitTitle?: string;
+
+  /** Defaults to True, show/hide 1 of the last 2 checkbox at the end of the picker list */
+  hideForceFitButton?: boolean;
+
+  /** Defaults to True, show/hide 1 of the last 2 checkbox at the end of the picker list */
+  hideSyncResizeButton?: boolean;
+
+  /** Defaults to False, which will resize the Header Row and remove the width of the Grid Menu icon from it's total width. */
   resizeOnShowHeaderRow?: boolean;
+
+  /** Defaults to True, which will show the "Clear All Filter" command in the Grid Menu (Grid Option "enableFiltering: true" has to be enabled) */
   showClearAllFiltersCommand?: boolean;
+
+  /** Defaults to True, which will show the "Export to CSV" command in the Grid Menu (Grid Option "enableExport: true" has to be enabled) */
   showExportCsvCommand?: boolean;
+
+  /** Defaults to True, which will show the "Export to Text Delimited" command in the Grid Menu (Grid Option "enableExport: true" has to be enabled) */
   showExportTextDelimitedCommand?: boolean;
+
+  /** Defaults to True, which will show the "Refresh Dataset" command in the Grid Menu (only works with a Backend Service API) */
   showRefreshDatasetCommand?: boolean;
+
+  /** Defaults to True, which will show the "Toggle Filter Row" command in the Grid Menu (Grid Option "enableFiltering: true" has to be enabled) */
   showToggleFilterCommand?: boolean;
+
+  /** Defaults to "Synchronous resize" which is 1 of the last 2 checkbox title shown at the end of the picker list */
   syncResizeTitle?: string;
 
+  /** SlickGrid Event fired before the menu is shown. */
   onBeforeMenuShow?: (e: Event, args: any) => void;
+
+  /** SlickGrid Event fired when any of the columns checkbox selection changes. */
+  onColumnsChanged?: (e: Event, args: any) => void;
+
+  /** SlickGrid Event fired when the menu is closing. */
   onMenuClose?: (e: Event, args: any) => void;
+
+  /** SlickGrid Event fired on menu item click for buttons with 'command' specified. */
   onCommand?: (e: Event, args: any) => void;
 }

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

@@ -125,6 +125,13 @@ export class ControlAndPluginService {
     options.columnPicker.syncResizeTitle = options.columnPicker.syncResizeTitle || syncResizeTitle;
 
     this.columnPickerControl = new Slick.Controls.ColumnPicker(columnDefinitions, grid, options);
+    if (grid && options.enableColumnPicker) {
+      this.columnPickerControl.onColumnsChanged.subscribe((e: Event, args: CellArgs) => {
+        if (options.columnPicker && typeof options.columnPicker.onColumnsChanged === 'function') {
+          options.columnPicker.onColumnsChanged(e, args);
+        }
+      });
+    }
   }
 
   /**
@@ -144,6 +151,11 @@ export class ControlAndPluginService {
           options.gridMenu.onBeforeMenuShow(e, args);
         }
       });
+      gridMenuControl.onColumnsChanged.subscribe((e: Event, args: CellArgs) => {
+        if (options.gridMenu && typeof options.gridMenu.onColumnsChanged === 'function') {
+          options.gridMenu.onColumnsChanged(e, args);
+        }
+      });
       gridMenuControl.onCommand.subscribe((e: Event, args: CellArgs) => {
         if (options.gridMenu && typeof options.gridMenu.onCommand === 'function') {
           options.gridMenu.onCommand(e, args);
@@ -195,9 +207,6 @@ export class ControlAndPluginService {
       this.columnPickerControl = null;
     }
     if (this.gridMenuControl) {
-      this.gridMenuControl.onBeforeMenuShow.unsubscribe();
-      this.gridMenuControl.onCommand.unsubscribe();
-      this.gridMenuControl.onMenuClose.unsubscribe();
       this.gridMenuControl.destroy();
       this.gridMenuControl = null;
     }