diff --git a/packages/common/src/extensions/__tests__/columnPickerExtension.spec.ts b/packages/common/src/extensions/__tests__/columnPickerExtension.spec.ts index ddc2b8f04..41dab134b 100644 --- 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 index face052b2..498d2cd4f 100644 --- 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 index 0095558a6..9377c12d8 100644 --- 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 index 9a0507801..58eb7a87a 100644 --- 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;