Merge pull request #234 from ghiscoding/bugfix/grid-menu-add-dynamic-column-definition

fix(menu): Column Picker & Grid Menu not updated dynamically, fixes #233

Author: ghiscoding

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

@@ -112,6 +112,8 @@ export class GridEditorComponent implements OnInit {
       {
         id: 'edit',
         field: 'id',
+        excludeFromColumnPicker: true,
+        excludeFromGridMenu: true,
         excludeFromHeaderMenu: true,
         formatter: Formatters.editIcon,
         minWidth: 30,
@@ -126,6 +128,8 @@ export class GridEditorComponent implements OnInit {
       }, {
         id: 'delete',
         field: 'id',
+        excludeFromColumnPicker: true,
+        excludeFromGridMenu: true,
         excludeFromHeaderMenu: true,
         formatter: Formatters.deleteIcon,
         minWidth: 30,

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

@@ -52,6 +52,10 @@ export class GridMenuExtension implements Extension {
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
     }
+    this._userOriginalGridMenu = undefined;
+    if (this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && this.sharedService.gridOptions.gridMenu.customItems) {
+      this.sharedService.gridOptions.gridMenu.customItems = [];
+    }
   }
 
   showGridMenu(e) {

src/app/modules/angular-slickgrid/services/__tests__/extension.service.spec.ts

@@ -518,10 +518,48 @@ describe('ExtensionService', () => {
     it('should call "setColumns" on the Shared Service with the collection provided as argument', () => {
       const columnsMock = [{ id: 'field1', field: 'field1', headerKey: 'HELLO' }] as Column[];
       jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+      const spyAllCols = jest.spyOn(SharedService.prototype, 'allColumns', 'set');
       const setColumnsSpy = jest.spyOn(gridStub, 'setColumns');
 
       service.renderColumnHeaders(columnsMock);
 
+      expect(spyAllCols).toHaveBeenCalledWith(columnsMock);
+      expect(setColumnsSpy).toHaveBeenCalledWith(columnsMock);
+    });
+
+    it('should re-register the Column Picker when enable and method is called with new column definition collection provided as argument', () => {
+      const gridOptionsMock = { enableColumnPicker: true } as GridOption;
+      const columnsMock = [{ id: 'field1', field: 'field1', headerKey: 'HELLO' }] as Column[];
+      jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
+      jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+      const spyCpDispose = jest.spyOn(extensionColumnPickerStub, 'dispose');
+      const spyCpRegister = jest.spyOn(extensionColumnPickerStub, 'register');
+      const spyAllCols = jest.spyOn(SharedService.prototype, 'allColumns', 'set');
+      const setColumnsSpy = jest.spyOn(gridStub, 'setColumns');
+
+      service.renderColumnHeaders(columnsMock);
+
+      expect(spyCpDispose).toHaveBeenCalled();
+      expect(spyCpRegister).toHaveBeenCalled();
+      expect(spyAllCols).toHaveBeenCalledWith(columnsMock);
+      expect(setColumnsSpy).toHaveBeenCalledWith(columnsMock);
+    });
+
+    it('should re-register the Grid Menu when enable and method is called with new column definition collection provided as argument', () => {
+      const gridOptionsMock = { enableGridMenu: true } as GridOption;
+      const columnsMock = [{ id: 'field1', field: 'field1', headerKey: 'HELLO' }] as Column[];
+      jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
+      jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+      const spyGmDispose = jest.spyOn(extensionGridMenuStub, 'dispose');
+      const spyGmRegister = jest.spyOn(extensionGridMenuStub, 'register');
+      const spyAllCols = jest.spyOn(SharedService.prototype, 'allColumns', 'set');
+      const setColumnsSpy = jest.spyOn(gridStub, 'setColumns');
+
+      service.renderColumnHeaders(columnsMock);
+
+      expect(spyGmDispose).toHaveBeenCalled();
+      expect(spyGmRegister).toHaveBeenCalled();
+      expect(spyAllCols).toHaveBeenCalledWith(columnsMock);
       expect(setColumnsSpy).toHaveBeenCalledWith(columnsMock);
     });
   });

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

@@ -319,6 +319,7 @@ export class ExtensionService {
 
     // re-render the column headers
     this.renderColumnHeaders(columnDefinitions);
+    this.gridMenuExtension.translateGridMenu();
   }
 
   /**
@@ -331,8 +332,19 @@ export class ExtensionService {
       collection = this.sharedService.columnDefinitions;
     }
     if (Array.isArray(collection) && this.sharedService.grid && this.sharedService.grid.setColumns) {
+      this.sharedService.allColumns = collection;
       this.sharedService.grid.setColumns(collection);
     }
+
+    if (this.sharedService.gridOptions.enableColumnPicker) {
+      this.columnPickerExtension.dispose();
+      this.columnPickerExtension.register();
+    }
+
+    if (this.sharedService.gridOptions.enableGridMenu) {
+      this.gridMenuExtension.dispose();
+      this.gridMenuExtension.register();
+    }
   }
 
   /** Translate an array of items from an input key and assign translated value to the output key */