fix(picker): add missing pre-header title grouping extractor

- also fixed columnpicker instantiation is with grid options instead of columnpicker options
ghiscoding · Jun 16, 2020 · fa3148b · fa3148b
1 parent 1c7d49f
commit fa3148b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/packages/common/src/extensions/__tests__/columnPickerExtension.spec.ts b/packages/common/src/extensions/__tests__/columnPickerExtension.spec.ts
@@ -72,7 +72,7 @@ describe('columnPickerExtension', () => {
       expect(instance).toBeTruthy();
       expect(instance).toEqual(addonInstance);
       expect(onRegisteredSpy).toHaveBeenCalledWith(instance);
-      expect(mockAddon).toHaveBeenCalledWith(columnsMock, gridStub, gridOptionsMock.columnPicker);
+      expect(mockAddon).toHaveBeenCalledWith(columnsMock, gridStub, gridOptionsMock);
     });
 
     it('should call internal event handler subscribe and expect the "onColumnSpy" option to be called when addon notify is called', () => {

diff --git a/packages/common/src/extensions/columnPickerExtension.ts b/packages/common/src/extensions/columnPickerExtension.ts
@@ -46,7 +46,7 @@ export class ColumnPickerExtension implements Extension {
       this.sharedService.gridOptions.columnPicker.columnTitle = this.sharedService.gridOptions.columnPicker.columnTitle || columnTitle;
       this.sharedService.gridOptions.columnPicker.forceFitTitle = this.sharedService.gridOptions.columnPicker.forceFitTitle || forceFitTitle;
       this.sharedService.gridOptions.columnPicker.syncResizeTitle = this.sharedService.gridOptions.columnPicker.syncResizeTitle || syncResizeTitle;
-      this._addon = new Slick.Controls.ColumnPicker(this.sharedService.allColumns, this.sharedService.grid, this.sharedService.gridOptions.columnPicker);
+      this._addon = new Slick.Controls.ColumnPicker(this.sharedService.allColumns, this.sharedService.grid, this.sharedService.gridOptions);
 
       if (this.sharedService.grid && this.sharedService.gridOptions.enableColumnPicker) {
         if (this._addon && this.sharedService.gridOptions.columnPicker.onExtensionRegistered) {

diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -24,6 +24,7 @@ export const GlobalGridOptions: GridOption = {
     fadeSpeed: 0,
     hideForceFitButton: false,
     hideSyncResizeButton: true,
+    headerColumnValueExtractor: pickerHeaderColumnValueExtractor
   },
   cellMenu: {
     autoAdjustDrop: true,
@@ -146,14 +147,7 @@ export const GlobalGridOptions: GridOption = {
     menuWidth: 16,
     resizeOnShowHeaderRow: true,
     useClickToRepositionMenu: false, // use icon location to reposition instead
-    headerColumnValueExtractor: (column: Column) => {
-      const headerGroup = column?.columnGroup || '';
-      if (headerGroup) {
-        // when using Column Header Grouping, we'll prefix the column group title
-        return headerGroup + ' - ' + column.name;
-      }
-      return column?.name ?? '';
-    }
+    headerColumnValueExtractor: pickerHeaderColumnValueExtractor
   },
   headerMenu: {
     autoAlign: true,
@@ -196,3 +190,16 @@ export const GlobalGridOptions: GridOption = {
   topPanelHeight: 30,
   translationNamespaceSeparator: ':',
 };
+
+/**
+ * Value Extractor for both ColumnPicker & GridMenu Picker
+ * when using Column Header Grouping, we'll prefix the column group title
+ * else we'll simply return the column name title
+ */
+function pickerHeaderColumnValueExtractor(column: Column) {
+  const headerGroup = column?.columnGroup || '';
+  if (headerGroup) {
+    return headerGroup + ' - ' + column.name;
+  }
+  return column?.name ?? '';
+}
diff --git a/packages/common/src/interfaces/slickNamespace.interface.ts b/packages/common/src/interfaces/slickNamespace.interface.ts
@@ -129,7 +129,7 @@ export interface SlickNamespace {
   // all of the controls are under the Controls namespace
   Controls: {
     /** A control to add a Column Picker (right+click on any column header to reveal the column picker) */
-    ColumnPicker: new (columns: Column[], grid: SlickGrid, options?: ColumnPickerOption) => SlickColumnPicker;
+    ColumnPicker: new (columns: Column[], grid: SlickGrid, options?: GridOption) => SlickColumnPicker;
 
     /** A control to add a Grid Menu (hambuger menu on top-right of the grid) */
     GridMenu: new (columns: Column[], grid: SlickGrid, options?: GridOption) => SlickGridMenu;