While reorder the column in slickgrid, the header menu frozen column funtionality not working - slickgrid

Question

While reorder the column in slickgrid, the header menu frozen column functionality is not working.
The below error thrown in console:
zone-evergreen.js:172 Uncaught TypeError: this.sharedService.visibleColumns is not iterable
at HeaderMenuExtension.executeHeaderMenuInternalCommands (angular-slickgrid.js:10948:1)
at HeaderMenu.<anonymous> (angular-slickgrid.js:10696:1)
at Event.notify (slick.core.js:104:1)
at HTMLDivElement.handleMenuItemClick (slick.headermenu.js:346:1)
at HTMLDivElement.dispatch (jquery.js:5183:1)
at HTMLDivElement.$event.dispatch (jquery.event.drag-2.3.0.js:387:1)
at HTMLDivElement.push.7TqN.$event.dispatch (jquery.event.drag-2.3.0.js:387:1)
at HTMLDivElement.elemData.handle (jquery.js:4991:1)
at ZoneDelegate.invokeTask (zone-evergreen.js:400:1)
at Zone.runTask (zone-evergreen.js:168:1)
My grid option
public gridOptions: GridOption = {
enableAutoSizeColumns: false,
// angular-upgrade
enableEmptyDataWarningMessage: false,
autoFitColumnsOnFirstLoad: false,
autoCommitEdit: true,
enablePagination: true,
pagination: { // Pagination UI - Item per page select options for default pagintation
pageSizes: [10, 15, 20, 25, 50, 75, 100, 200, 1000, 2000],
pageSize: 50
},
autoEdit: false,
rowHeight: 40,
headerRowHeight: 40,
enableCellNavigation: true,
editable: true,
enableAutoResize: true,
enableSorting: true,
enableFiltering: true,
enableExcelExport: true,
enableExport: true,
i18n: this.translateService,
gridMenu: {
hideExportExcelCommand: true,
hideExportCsvCommand: true,
customItems: [{
command: "cspfm-excel-export",
titleKey: "EXPORT_TO_EXCEL",
iconCssClass: "fa fa-file-excel-o",
action: (event, callbackArgs) => {
this.slickgridUtils.excelExport(event, callbackArgs, this.tempColumnDefinitions, this)
}
}, {
command: "cspfm-csv-export",
titleKey: "EXPORT_TO_CSV",
iconCssClass: "fa fa-download",
action: (event, callbackArgs) => {
this.slickgridUtils.excelExport(event, callbackArgs, this.tempColumnDefinitions, this)
}
},
{ divider: true, command: '', positionOrder: 90 },
{
command: "cspfm-appm-guide-fetch-mode-fully",
titleKey: "Full fetch",
iconCssClass: "icon-mat-explore",
action: (event, callbackArgs) => {
this.dataFetchMode = 'Full';
this.fetchModeChanged()
},
positionOrder: 91
}, {
command: "cspfm-appm-guide-fetch-mode-batch",
titleKey: "Batchwise fetch",
iconCssClass: "icon-mat-autorenew",
action: (event, callbackArgs) => {
this.dataFetchMode = 'Batch';
this.fetchModeChanged()
},
positionOrder: 92
}, {
command: "cspfm-appm-guide-fetch-mode-action",
titleKey: "On click batchwise",
iconCssClass: "icon-mat-touch_app",
action: (event, callbackArgs) => {
this.dataFetchMode = 'OnClickBatch';
this.fetchModeChanged()
},
positionOrder: 93
}, {
command: "cspfm-toggle-pagination",
titleKey: "Toggle pagination",
iconCssClass: "fa fa-bookmark",
action: (event, callbackArgs) => {
this.slickgridUtils.togglePagination(event, callbackArgs, this.gridObj, this.angularGrid)
},
positionOrder: 94
},
{
command: "cspfm-groupby",
titleKey: "Group-by",
iconCssClass: "icon-mat-account_tree",
action: (event, callbackArgs) => {
this.slickgridUtils.openDraggableGroupingRow(this.onGroupByEnabledObj, this.gridObj, "SearchList")
},
positionOrder: 95
}, {
command: "cspfm-clear-groupby",
titleKey: "Clear Grouping",
iconCssClass: "fa fa-times",
action: (event, callbackArgs) => {
this.slickgridUtils.clearGrouping(this.angularGrid, this.draggableGroupingPlugin, this.gridObj, this.gridOptions, this.filteredResultList, this.gridSearchRowToggle, this.onGroupByEnabledObj, this.filterSectionDetail)
},
positionOrder: 96
}
],
hideClearFrozenColumnsCommand: false
},
enableAutoTooltip: true,
autoTooltipOptions: {
enableForCells: true,
enableForHeaderCells: true,
maxToolTipLength: 1000
},
headerMenu: {
hideColumnHideCommand: true,
hideFreezeColumnsCommand: false
},
autoResize: {
containerId: this.gridContainerId,
calculateAvailableSizeBy: 'container'
},
exportOptions: {
exportWithFormatter: true
},
excelExportOptions: {
exportWithFormatter: true,
},
enableTranslate: true,
presets: {
sorters: [{ columnId: this.tableColumnInfo['pfm138993']['pfm138993_institutename_7']['prop'], direction: 'ASC' }],
},
enableAsyncPostRender: true, // for the Angular PostRenderer, don't forget to enable it
asyncPostRenderDelay: 0, // also make sure to remove any delay to render it
params: {
angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)
},
enableDraggableGrouping: true,
createPreHeaderPanel: true,
showPreHeaderPanel: false,
preHeaderPanelHeight: 40,
draggableGrouping: {
dropPlaceHolderText: 'Drop a column header here to group by the column',
deleteIconCssClass: 'fa fa-times',
onGroupChanged: (e, args) => this.slickgridUtils.onGroupChanged(e, args, this.gridMenuExtension, this.angularGrid, this.tempColumnDefinitions, this.gridObj, this.draggableGroupingPlugin, this.gridOptions, this.layoutId),
onExtensionRegistered: (extension) => {
this.draggableGroupingPlugin = extension
}
},
enableColumnReorder: true,
alwaysShowVerticalScroll: false
};
Frozen column code in onAngularGridCreated:
angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
this.gridObj = angularGrid.slickGrid;
this.angularGrid.gridService.setPinning({ frozenColumn: 2 }, false, true, true);
}
Software Version:
Angular : 11.2.18
Angular-Slickgrid : 2.30.4
TypeScript : 4.0.8
Operating System : Windows 10
Node : 14.18.3
NPM : 6.14.15