@adaptabletools/adaptable 11.2.4-canary.0 → 12.0.0-canary.0

package/src/agGrid/Adaptable.d.ts

@@ -18,6 +18,7 @@ import { SelectedRowInfo } from '../PredefinedConfig/Selection/SelectedRowInfo';
 import { AdaptableTheme } from '../PredefinedConfig/ThemeState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
+import { AdaptableColumnType } from '../types';
 import { EmitterCallback } from '../Utilities/Emitter';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
 import { LicenseService } from '../Utilities/Services/LicenseService';
@@ -36,6 +37,7 @@ import { ColumnSetupInfo } from './ColumnSetupInfo';
 import { CustomSort } from '../PredefinedConfig/CustomSortState';
 import { ColumnValuesComparer } from '../AdaptableOptions/GeneralOptions';
 import { IMetamodelService } from '../Utilities/Services/Interface/IMetamodelService';
+import { IRowEditService } from '../Utilities/Services/Interface/IRowEditService';
 declare type RuntimeConfig = {
     waitForAgGrid?: boolean;
     modules?: Module[];
@@ -55,10 +57,12 @@ export declare class Adaptable implements IAdaptable {
     AlertService: IAlertService;
     TeamSharingService: ITeamSharingService;
     MetamodelService: IMetamodelService;
+    RowEditService: IRowEditService;
     private LicenseService;
     embedColumnMenu: boolean;
     gridOptions: GridOptions;
     isInitialised: boolean;
+    hasAdaptableToolPanel: boolean;
     private useRowNodeLookUp;
     private abContainerElement;
     private gridContainerElement;
@@ -117,6 +121,7 @@ export declare class Adaptable implements IAdaptable {
     private initializeAgGrid;
     private isAgGridReady;
     private initAgGridContainerFromInitializedAgGrid;
+    private createAdaptableSideBarDef;
     private createStatusBars;
     getAgGridStatusPanels(): import("@ag-grid-community/all-modules").StatusPanelDef[];
     debouncedSetColumnIntoStore: import("lodash").DebouncedFunc<() => void>;
@@ -236,13 +241,14 @@ export declare class Adaptable implements IAdaptable {
         suppressMovable: boolean;
         headerTooltip: string;
         cellEditor: string | typeof AdaptableNumberEditor | typeof AdaptableDateEditor;
-        type: string[];
+        type: AdaptableColumnType[];
         valueSetter: (params: ValueSetterParams) => any;
         cellRenderer: import("@ag-grid-community/all-modules").ICellRendererFunc;
         valueGetter: (params: ValueGetterParams) => any;
     }[];
     setupColumnValueGetter({ col }: ColumnSetupInfo): void;
     setupColumnAggFunc({ col }: ColumnSetupInfo): void;
+    private getColDefsForRowEditColumns;
     getColDefsForActionColumns(): ColDef[];
     updateColDefsForSpecialColumns(): void;
     private cleanupFloatingFilters_WORKAROUND;
@@ -278,7 +284,6 @@ export declare class Adaptable implements IAdaptable {
     setupColumnCellRenderer({ col, colId, abColumn }: ColumnSetupInfo): void;
     setupColumnTooltipValueGetter({ col, colId }: ColumnSetupInfo): void;
     setupColumnHeader({ col, abColumn }: ColumnSetupInfo): boolean;
-    getUserDefinedHeaderName(columnId: string): string;
     setupColumnFilter({ col, colDef }: ColumnSetupInfo): void;
     setupColumnFloatingFilter({ col, colDef }: ColumnSetupInfo): void;
     setupColumnValueFormatter({ col, abColumn }: ColumnSetupInfo): void;

package/src/agGrid/Adaptable.js

@@ -26,7 +26,7 @@ const AdaptableHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/
 const FormatHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/FormatHelper"));
 const Helper_1 = require("../Utilities/Helpers/Helper");
 const LoggingHelper_1 = require("../Utilities/Helpers/LoggingHelper");
-const ObjectFactory_1 = tslib_1.__importStar(require("../Utilities/ObjectFactory"));
+const ObjectFactory_1 = require("../Utilities/ObjectFactory");
 // services
 const CalculatedColumnExpressionService_1 = require("../Utilities/Services/CalculatedColumnExpressionService");
 const DataService_1 = require("../Utilities/Services/DataService");
@@ -61,6 +61,8 @@ const DateHelper_1 = require("../Utilities/Helpers/DateHelper");
 const StatusBarState_1 = require("../PredefinedConfig/StatusBarState");
 const createAgStatusPanelComponent_1 = require("./createAgStatusPanelComponent");
 const AdaptableStatusBar_1 = require("../View/StatusBar/AdaptableStatusBar");
+const RowEditService_1 = require("../Utilities/Services/RowEditService");
+const rowEditIcons_1 = require("./rowEditIcons");
 const tinycolor = require('tinycolor2');
 all_modules_1.ModuleRegistry.registerModules(all_modules_1.AllCommunityModules);
 const GROUP_PATH_SEPARATOR = '/';
@@ -373,7 +375,7 @@ class Adaptable {
         // Build the default group sort comparator - will get custom sort values (but not functions) in real time
         // TODO: if  a custom 'aggFunc' property is defined (see setupColumnAggFunc()), it won't be evaluated
         if (!this.getInitialGroupOrderComparator(this.gridOptions) &&
-            this.adaptableOptions.generalOptions.autoOrderGroupedColumns) {
+            this.adaptableOptions.columnOptions.autoOrderGroupedColumns) {
             this.gridOptions.initialGroupOrderComparator =
                 this.agGridHelper.runAdaptableGroupComparerFunction();
         }
@@ -391,6 +393,7 @@ class Adaptable {
         this.QueryLanguageService = new QueryLanguageService_1.QueryLanguageService(this.api);
         this.AlertService = new AlertService_1.AlertService(this.api);
         this.TeamSharingService = new TeamSharingService_1.TeamSharingService(this.api);
+        this.RowEditService = new RowEditService_1.RowEditService(this.api);
         this.MetamodelService = new MetamodelService_1.MetamodelService(this.api);
         this.forPlugins((plugin) => plugin.afterInitServices(this));
         // Set up Modules - we set up all the Modules suitable for AG Grid
@@ -452,6 +455,13 @@ class Adaptable {
             }).then(async () => {
                 this.api.internalApi.hideLoadingScreen();
                 this.isInitialised = true;
+                this._adaptableReady = true;
+                // setTimeout(() => {
+                // this.api.eventApi.emit('AdaptableReady', {
+                //   adaptableApi: this.api,
+                //   gridOptions: this.adaptableOptions.gridOptions,
+                // });
+                // }, 0);
             });
             if (this.abContainerElement == null) {
                 this.abContainerElement = this.getAdaptableContainerElement();
@@ -516,16 +526,18 @@ class Adaptable {
             this.performAudit(data.action, data.state, data.newState);
             this.forPlugins((plugin) => plugin.onStoreEvent(eventName, data, this.adaptableStore));
             if (eventName == AdaptableStore_1.INIT_STATE) {
-                this._adaptableReady = true;
                 LoggingHelper_1.LogAdaptableInfo(`Updating obsolete configuration/state`);
                 this.adaptableModules.forEach((m) => m.updateOldConfig());
                 // call stuff here
                 // and reset state also?
                 this.forPlugins((plugin) => plugin.onAdaptableReady(this, this.adaptableOptions));
+                this._adaptableReady = true;
+                // setTimeout(() => {
                 this.api.eventApi.emit('AdaptableReady', {
                     adaptableApi: this.api,
                     gridOptions: this.adaptableOptions.gridOptions,
                 });
+                // }, 0);
             }
         });
     }
@@ -566,39 +578,19 @@ class Adaptable {
             //   this.gridOptions.components.__adaptableGroupCellRenderer = AdaptableGroupCellRenderer;
             // }
         }
-        // Create Adaptable adaptable Tool Panel
-        if (this.adaptableOptions.toolPanelOptions.showAdaptableToolPanel) {
-            if (this.gridOptions.sideBar) {
-                this.gridOptions.sideBar = this.gridOptions.sideBar || {};
-                this.gridOptions.components = this.gridOptions.components || {};
-                // https://www.ag-grid.com/javascript-grid/side-bar/
-                const sidebar = this.gridOptions.sideBar;
-                if (sidebar === true) {
-                    // Possibility 1: Sidebar is true - meaning that they want the default filter and columns, so create both:
-                    this.gridOptions.sideBar = this.agGridHelper.createAdaptableSideBarDefs(true, true);
-                }
-                else if (sidebar === 'columns') {
-                    // Possibility 2: Sidebar is 'columns' (string) - meaning column only so create just that
-                    this.gridOptions.sideBar = this.agGridHelper.createAdaptableSideBarDefs(false, true);
-                }
-                else if (sidebar === 'filters') {
-                    // Possibility 3: Sidebar is 'filters' (string) - meaning filters only so create just that
-                    this.gridOptions.sideBar = this.agGridHelper.createAdaptableSideBarDefs(true, false);
-                }
-                else {
-                    // Possibilty 4: either no sidebar or they created their own; in either case, should add adaptable Tool panel
-                    const sidebarDef = this.gridOptions.sideBar;
-                    if (sidebarDef) {
-                        sidebarDef.toolPanels = sidebarDef.toolPanels || [];
-                        sidebarDef.toolPanels.push(this.agGridHelper.createAdaptableToolPanel());
-                        this.agGridHelper.orderToolPanels(sidebarDef.toolPanels);
-                    }
-                }
-                this.gridOptions.components.AdaptableToolPanel = AdaptableToolPanel_1.getAdaptableToolPanelAgGridComponent(this);
-                if (this.gridOptions.api) {
-                    this.gridOptions.api.setSideBar(this.gridOptions.sideBar);
-                }
+        const adaptableSideBarDef = this.createAdaptableSideBarDef();
+        if (!!adaptableSideBarDef) {
+            this.gridOptions.components = this.gridOptions.components || {};
+            this.gridOptions.components.AdaptableToolPanel = AdaptableToolPanel_1.getAdaptableToolPanelAgGridComponent(this);
+        }
+        if (this.agGridHelper.isSideBarDefObject(adaptableSideBarDef)) {
+            if (this.gridOptions.api) {
+                this.gridOptions.api.setSideBar(adaptableSideBarDef);
             }
+            else {
+                this.gridOptions.sideBar = adaptableSideBarDef;
+            }
+            this.hasAdaptableToolPanel = true;
         }
         this.createStatusBars();
         const checkAgGridContainer = () => {
@@ -680,6 +672,50 @@ class Adaptable {
         }
         return (this.adaptableOptions.containerOptions.agGridContainer = agGridContainer);
     }
+    createAdaptableSideBarDef() {
+        var _a;
+        if (
+        // no need to create the sidebar if it is not enabled
+        !this.gridOptions.sideBar) {
+            return;
+        }
+        if (this.gridOptions.sideBar === true) {
+            // create all tool panels with default settings
+            return {
+                toolPanels: [
+                    GeneralConstants.AGGRID_TOOLPANEL_FILTERS,
+                    GeneralConstants.AGGRID_TOOLPANEL_COLUMNS,
+                    this.agGridHelper.buildAdaptableToolPanelDef(),
+                ],
+            };
+        }
+        else if (typeof this.gridOptions.sideBar === 'string') {
+            // there is only one tool panel, and it's the adaptable one => we have to handle it
+            if (this.gridOptions.sideBar === GeneralConstants.ADAPTABLE_TOOLPANEL_ID) {
+                return {
+                    toolPanels: [this.agGridHelper.buildAdaptableToolPanelDef()],
+                };
+            }
+        }
+        else if (Array.isArray(this.gridOptions.sideBar)) {
+            if (!this.gridOptions.sideBar.includes(GeneralConstants.ADAPTABLE_TOOLPANEL_ID)) {
+                return;
+            }
+            // if it's an array, process the tool panel definitions
+            const sidebarDef = {};
+            sidebarDef.toolPanels = this.agGridHelper.mapToolPanelDefs(this.gridOptions.sideBar);
+            return sidebarDef;
+        }
+        else if (this.agGridHelper.isSideBarDefObject(this.gridOptions.sideBar)) {
+            if ((_a = this.gridOptions.sideBar.toolPanels) === null || _a === void 0 ? void 0 : _a.some((toolpanelDef) => typeof toolpanelDef !== 'string' &&
+                toolpanelDef.id === GeneralConstants.ADAPTABLE_TOOLPANEL_ID)) {
+                // return the boolean flag so that we know that we need the custom AdaptableToolPanel component
+                return true;
+            }
+            // if it's fully-fledged SideBarDef, process its tool panel definitions
+            return Object.assign(Object.assign({}, this.gridOptions.sideBar), { toolPanels: this.agGridHelper.mapToolPanelDefs(this.gridOptions.sideBar.toolPanels) });
+        }
+    }
     createStatusBars() {
         var _a, _b;
         const statusBarOptions = Object.assign({}, this.gridOptions.statusBar);
@@ -1106,6 +1142,7 @@ class Adaptable {
         return isCellReadonly ? readonlyCellStyle.ClassName : null;
     }
     isQuickSearchActive(abColumn, params) {
+        var _a;
         if (abColumn.isExcludedFromQuickSearch) {
             return false;
         }
@@ -1116,8 +1153,11 @@ class Adaptable {
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(quickSearchValue)) {
             return false;
         }
-        const columnFilter = ObjectFactory_1.default.CreateColumnFilter(abColumn.columnId, 'Contains', [quickSearchValue]);
-        return this.api.filterApi.evaluateColumnFilter(columnFilter, params.node);
+        const displayValue = (_a = this.api.gridApi.getDisplayValueFromRowNode(params.node, abColumn.columnId)) !== null && _a !== void 0 ? _a : '';
+        const ignoreCase = !this.api.internalApi.isTextComparisonCaseSensitive();
+        const v = ignoreCase ? String(displayValue).toLocaleLowerCase() : String(displayValue);
+        const i = ignoreCase ? String(quickSearchValue).toLocaleLowerCase() : String(quickSearchValue);
+        return v.indexOf(i) !== -1;
     }
     getPrimaryKeyValueFromRowNode(rowNode) {
         var _a;
@@ -1201,6 +1241,12 @@ class Adaptable {
             layout = this.api.layoutApi.getCurrentLayout();
         }
         layout.Columns = layout.Columns || [];
+        const rowEditActionColumn = this.getColDefsForRowEditColumns()[0];
+        if (rowEditActionColumn) {
+            layout.Columns.push(rowEditActionColumn.colId);
+            layout.PinnedColumnsMap = layout.PinnedColumnsMap || {};
+            layout.PinnedColumnsMap[rowEditActionColumn.colId] = rowEditActionColumn.pinned;
+        }
         const layoutColumnsMap = layout.Columns.reduce((acc, colId) => {
             acc[colId] = true;
             return acc;
@@ -1240,7 +1286,7 @@ class Adaptable {
         let newColState = this.getSortedColumnStateForVisibleColumns(columnsToShow, columnsState);
         newColState = newColState
             .map((colState) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             const { colId } = colState;
             const oldColState = columnsStateMap[colId];
             const hide = this.api.columnApi.isAutoPivotColumn(colId)
@@ -1279,10 +1325,16 @@ class Adaptable {
                 newColState.aggFunc =
                     aggregationFunctionsColumnsMap[colId] === true
                         ? // if we have true, it means - take the default aggFunc from colDef
-                         (_d = (_c = 
+                         (_e = (_d = (_c = 
                         // NOTE: colState gives us the current aggFunc, which can be null,
                         // while the colDef gives us the initially configured aggFunc for that column
-                        colState.aggFunc) !== null && _c !== void 0 ? _c : colDef === null || colDef === void 0 ? void 0 : colDef.aggFunc) !== null && _d !== void 0 ? _d : 'sum' : aggregationFunctionsColumnsMap[colId];
+                        colState.aggFunc) !== null && _c !== void 0 ? _c : colDef === null || colDef === void 0 ? void 0 : colDef.aggFunc) !== null && _d !== void 0 ? _d : 
+                        // @ts-ignore available only wth ag-Grid v27.3.x
+                        colDef === null || 
+                        // @ts-ignore available only wth ag-Grid v27.3.x
+                        colDef === void 0 ? void 0 : 
+                        // @ts-ignore available only wth ag-Grid v27.3.x
+                        colDef.defaultAggFunc) !== null && _e !== void 0 ? _e : 'sum' : aggregationFunctionsColumnsMap[colId];
             }
             if (sortModelMap[colId]) {
                 newColState.sort = sortModelMap[colId].sort;
@@ -1807,7 +1859,7 @@ class Adaptable {
         const pkValue = this.getPrimaryKeyValueFromRowNode(rowNode);
         const rawValue = this.getRawValueFromRowNode(rowNode, columnId);
         const displayValue = this.getDisplayValueFromRawValue(columnId, rawValue);
-        const normalisedvalue = this.getNormalisedValueFromRowValue(rawValue, displayValue, abColumn);
+        const normalisedvalue = this.getNormalisedValueFromRowValue(rawValue, abColumn);
         return {
             rawValue: rawValue,
             displayValue: displayValue,
@@ -1872,35 +1924,28 @@ class Adaptable {
         };
         return formatterFn(params);
     }
-    getNormalisedValueFromRowValue(rawValue, displayValue, column) {
-        // not sure if the current implementation is correct:
-        // the returned "normalised value" is actually the displayed value in almost all cases?!
-        // ex. how to read the following: if 'rawValue' is NOT a number, return normalised version of rawValue, but if rawValue IS a number, return displayedValue of it (which will almost certainly will NOT be a number)
-        //   if (dataType === 'Number') {
-        //     return typeof rawValue !== 'number' ? Number(rawValue) : returnValue;
-        //   }
-        // anyway, it seems to work so far (as of v11.1.3), so I'm leaving it for now :)
+    getNormalisedValueFromRowValue(rawValue, column) {
         if (!column) {
             return rawValue;
         }
-        const returnValue = this.isCustomRenderedColumn(column) ? rawValue : displayValue;
-        if (returnValue === undefined || returnValue === null) {
+        // prevents from null
+        if (rawValue === undefined || rawValue === null) {
             return rawValue;
         }
         const dataType = column.dataType;
         if (dataType === 'String') {
-            return typeof rawValue !== 'string' ? String(rawValue) : returnValue;
+            return typeof rawValue !== 'string' ? String(rawValue) : rawValue;
         }
         if (dataType === 'Number') {
-            return typeof rawValue !== 'number' ? Number(rawValue) : returnValue;
+            return typeof rawValue !== 'number' ? Number(rawValue) : rawValue;
         }
         if (dataType === 'Boolean') {
-            return typeof rawValue !== 'boolean' ? Boolean(rawValue) : returnValue;
+            return typeof rawValue !== 'boolean' ? Boolean(rawValue) : rawValue;
         }
         if (dataType === 'Date') {
             return rawValue instanceof Date ? rawValue : DateHelper_1.parseDateValue(rawValue);
         }
-        return returnValue;
+        return rawValue;
     }
     getRawValueFromRowNode(rowNode, columnId) {
         if (rowNode == null) {
@@ -2070,6 +2115,7 @@ class Adaptable {
             ...this.getColDefsForCalculatedColumns(),
             ...this.getColDefsForActionColumns(),
             ...this.getColDefsForFreeTextColumns(),
+            ...this.getColDefsForRowEditColumns(),
         ];
     }
     getColDefsForFreeTextColumns() {
@@ -2137,6 +2183,88 @@ class Adaptable {
             });
         }
     }
+    getColDefsForRowEditColumns() {
+        const actionRowButtons = this.adaptableOptions.userInterfaceOptions.actionOptions.actionRowButtons;
+        if (!(actionRowButtons === null || actionRowButtons === void 0 ? void 0 : actionRowButtons.length)) {
+            return [];
+        }
+        const editButtons = actionRowButtons
+            .map((buttonName) => {
+            if (buttonName === 'edit') {
+                // we need this dirty hack until ActionColumn support for custom icons is improved
+                const label = rowEditIcons_1.rowEditIcon;
+                return {
+                    label,
+                    tooltip: 'Edit',
+                    onClick: (button, context) => {
+                        this.api.gridApi.openEditRowForm(context.primaryKeyValue);
+                    },
+                };
+            }
+            if (buttonName === 'clone') {
+                // we need this dirty hack until ActionColumn support for custom icons is improved
+                const label = rowEditIcons_1.rowCloneIcon;
+                return {
+                    label,
+                    tooltip: 'Clone',
+                    onClick: (button, context) => {
+                        this.api.gridApi.openCloneRowForm(context.primaryKeyValue);
+                    },
+                };
+            }
+            if (buttonName === 'delete') {
+                // we need this dirty hack until ActionColumn support for custom icons is improved
+                const label = rowEditIcons_1.rowDeleteIcon;
+                return {
+                    label,
+                    tooltip: 'Delete',
+                    onClick: (button, context) => {
+                        var _a, _b;
+                        const eventInfo = {
+                            type: 'rowDeleted',
+                            rowNode: context.rowNode,
+                            adaptableApi: context.adaptableApi,
+                        };
+                        this.api.eventApi.emit('RowFormSubmitted', eventInfo);
+                        (_b = (_a = this.adaptableOptions.editOptions.rowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
+                    },
+                };
+            }
+        })
+            .filter(Boolean);
+        if (!editButtons.length) {
+            return [];
+        }
+        const rowEditActionColumn = {
+            columnId: 'adaptableRowEditButtons',
+            actionColumnButton: editButtons,
+        };
+        return [
+            {
+                headerName: '',
+                colId: 'adaptableRowEditButtons',
+                hide: false,
+                editable: false,
+                width: editButtons.length * 42,
+                resizable: false,
+                suppressMenu: true,
+                suppressMovable: true,
+                filter: false,
+                sortable: false,
+                enableRowGroup: false,
+                pinned: this.adaptableOptions.userInterfaceOptions.actionOptions.actionRowButtonsPosition ===
+                    'pinnedRight'
+                    ? 'right'
+                    : 'left',
+                cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
+                cellRendererParams: {
+                    actionColumn: rowEditActionColumn,
+                },
+                cellClass: 'adaptableRowEditButtons',
+                type: [GeneralConstants_1.AB_SPECIAL_COLUMN, 'abColDefObject'],
+            },
+        ];
+    }
     getColDefsForActionColumns() {
         const defaultActionColumnSettings = {
             resizable: true,
@@ -2289,6 +2417,10 @@ class Adaptable {
                 suppressMovable: calculatedColumnSettings.SuppressMovable,
                 type: columnTypes,
                 valueGetter: (params) => {
+                    var _a, _b;
+                    if ((_a = calculatedColumn.CalculatedColumnSettings) === null || _a === void 0 ? void 0 : _a.ExternallyEvaluatedExpression) {
+                        return (_b = params.data) === null || _b === void 0 ? void 0 : _b[calculatedColumn.ColumnId];
+                    }
                     return this.CalculatedColumnExpressionService.evaluateCalculatedColumnQuery(calculatedColumn, params.node);
                 },
             };
@@ -2350,7 +2482,7 @@ class Adaptable {
         return this.gridOptions.api.getDisplayedRowAtIndex(firstDisplayedRowIndex);
     }
     destroy(config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
         if (this.gridOptions && this.gridOptions.api) {
             this.gridOptions.api.removeEventListener(all_modules_1.Events.EVENT_FIRST_DATA_RENDERED, this.listenerFirstDataRendered);
             this.gridOptions.api.removeEventListener(all_modules_1.Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, this.listenerPivotModeChanged);
@@ -2410,27 +2542,29 @@ class Adaptable {
         this.adaptableStore = null;
         this.gridOptions = null;
         this.adaptableOptions = null;
-        (_b = this.CalculatedColumnExpressionService) === null || _b === void 0 ? void 0 : _b.destroy();
+        (_c = (_b = this.CalculatedColumnExpressionService) === null || _b === void 0 ? void 0 : _b.destroy) === null || _c === void 0 ? void 0 : _c.call(_b);
         this.CalculatedColumnExpressionService = null;
-        (_c = this.DataService) === null || _c === void 0 ? void 0 : _c.destroy();
+        (_e = (_d = this.DataService) === null || _d === void 0 ? void 0 : _d.destroy) === null || _e === void 0 ? void 0 : _e.call(_d);
         this.DataService = null;
-        (_d = this.EntitlementService) === null || _d === void 0 ? void 0 : _d.destroy();
+        (_g = (_f = this.EntitlementService) === null || _f === void 0 ? void 0 : _f.destroy) === null || _g === void 0 ? void 0 : _g.call(_f);
         this.EntitlementService = null;
-        (_e = this.ReportService) === null || _e === void 0 ? void 0 : _e.destroy();
+        (_j = (_h = this.ReportService) === null || _h === void 0 ? void 0 : _h.destroy) === null || _j === void 0 ? void 0 : _j.call(_h);
         this.ReportService = null;
-        (_f = this.ModuleService) === null || _f === void 0 ? void 0 : _f.destroy();
+        (_l = (_k = this.ModuleService) === null || _k === void 0 ? void 0 : _k.destroy) === null || _l === void 0 ? void 0 : _l.call(_k);
         this.ModuleService = null;
-        (_g = this.ValidationService) === null || _g === void 0 ? void 0 : _g.destroy();
+        (_o = (_m = this.ValidationService) === null || _m === void 0 ? void 0 : _m.destroy) === null || _o === void 0 ? void 0 : _o.call(_m);
         this.ValidationService = null;
-        (_h = this.QueryLanguageService) === null || _h === void 0 ? void 0 : _h.destroy();
+        (_q = (_p = this.QueryLanguageService) === null || _p === void 0 ? void 0 : _p.destroy) === null || _q === void 0 ? void 0 : _q.call(_p);
         this.QueryLanguageService = null;
-        (_j = this.AlertService) === null || _j === void 0 ? void 0 : _j.destroy();
+        (_s = (_r = this.AlertService) === null || _r === void 0 ? void 0 : _r.destroy) === null || _s === void 0 ? void 0 : _s.call(_r);
         this.AlertService = null;
-        (_k = this.TeamSharingService) === null || _k === void 0 ? void 0 : _k.destroy();
+        (_u = (_t = this.TeamSharingService) === null || _t === void 0 ? void 0 : _t.destroy) === null || _u === void 0 ? void 0 : _u.call(_t);
         this.TeamSharingService = null;
-        (_l = this.MetamodelService) === null || _l === void 0 ? void 0 : _l.destroy();
+        (_w = (_v = this.RowEditService) === null || _v === void 0 ? void 0 : _v.destroy) === null || _w === void 0 ? void 0 : _w.call(_v);
+        this.RowEditService = null;
+        (_y = (_x = this.MetamodelService) === null || _x === void 0 ? void 0 : _x.destroy) === null || _y === void 0 ? void 0 : _y.call(_x);
         this.MetamodelService = null;
-        (_m = this.LicenseService) === null || _m === void 0 ? void 0 : _m.destroy();
+        (_0 = (_z = this.LicenseService) === null || _z === void 0 ? void 0 : _z.destroy) === null || _0 === void 0 ? void 0 : _0.call(_z);
         this.LicenseService = null;
         this.isDestroyed = true;
     }
@@ -2609,6 +2743,7 @@ class Adaptable {
             all_modules_1.Events.EVENT_ROW_GROUP_OPENED,
             all_modules_1.Events.EVENT_COLUMN_VALUE_CHANGED,
         ];
+        // ADD filter event
         this.gridOptions.api.addGlobalListener((this.listenerGlobalColumnEventsThatTriggerAutoLayoutSave = (type) => {
             if (columnEventsThatTriggersAutoLayoutSave.indexOf(type) > -1) {
                 this.debouncedSaveGridLayout();
@@ -2622,7 +2757,7 @@ class Adaptable {
             if (this.api.internalApi.isGridInPivotMode()) {
                 return;
             }
-            if (this.adaptableOptions.generalOptions.hideColumnWhenGrouped === true &&
+            if (this.adaptableOptions.columnOptions.hideColumnWhenGrouped === true &&
                 params.source !== 'api') {
                 params.columns.forEach((col) => {
                     if (col.isVisible()) {
@@ -2722,7 +2857,7 @@ class Adaptable {
             if (this.isDestroyed) {
                 return true;
             }
-            const columnFilters = this.api.filterApi.getAllColumnFilter();
+            const columnFilters = this.api.layoutApi.getAllColumnFilter();
             const isFilterActive = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(columnFilters);
             const isQueryActive = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.api.queryApi.getCurrentQuery());
             return (isFilterActive ||
@@ -2753,10 +2888,10 @@ class Adaptable {
             try {
                 // we then assess filters (if running locally)
                 if (evaluateFilterOnClient) {
-                    const columnFilters = this.api.filterApi.getAllColumnFilter();
+                    const columnFilters = this.api.layoutApi.getAllColumnFilter();
                     if (columnFilters.length > 0) {
                         for (const columnFilter of columnFilters) {
-                            if (!this.api.filterApi.evaluateColumnFilter(columnFilter, node)) {
+                            if (!this.api.layoutApi.evaluateColumnFilter(columnFilter, node)) {
                                 return false;
                             }
                         }
@@ -2783,7 +2918,7 @@ class Adaptable {
         this.prepareGrid();
     }
     updateColumnFilterActiveState() {
-        const columnFilters = this.api.filterApi.getAllColumnFilter();
+        const columnFilters = this.api.layoutApi.getAllColumnFilter();
         const isFilterActive = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(columnFilters);
         const columnsWithActiveFilters = {};
         if (isFilterActive) {
@@ -2946,7 +3081,7 @@ class Adaptable {
                 fontSize: null,
                 borderColor: null,
             };
-            const formatColumn = this.api.formatColumnApi.getFormatColumnForColumn(abColumn);
+            const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
             const conditionalStyles = this.api.conditionalStyleApi.getConditionalStylesForColumn(abColumn);
             const quickSearchStyle = this.getQuickSearchCellStyle();
             const hasQuickSearchStyle = quickSearchStyle != undefined;
@@ -3013,7 +3148,7 @@ class Adaptable {
         const hasRichSelectCellEditor = this.isModulePresent('rich-select');
         this.setColDefProperty(col, 'cellEditor', () => {
             var _a;
-            const formatColumn = this.api.formatColumnApi.getFormatColumnForColumn(adaptableColumn);
+            const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(adaptableColumn);
             if (formatColumn && !(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) && ((_a = formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.CheckBoxStyle)) {
                 return CheckboxRenderer_1.CheckboxEditor;
             }
@@ -3041,7 +3176,7 @@ class Adaptable {
     }
     setupColumnCellRenderer({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellRenderer', () => {
-            const formatColumn = this.api.formatColumnApi.getFormatColumnForColumn(abColumn);
+            const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
             if (formatColumn && !(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) && formatColumn.ColumnStyle) {
                 if (formatColumn.ColumnStyle.PercentBarStyle) {
                     return this.agGridHelper.createPercentBarRendererComp(formatColumn);
@@ -3116,14 +3251,6 @@ class Adaptable {
         const newColumnHeader = (_b = col === null || col === void 0 ? void 0 : col.getColDef()) === null || _b === void 0 ? void 0 : _b.headerName;
         return previousColumnHeader !== newColumnHeader;
     }
-    getUserDefinedHeaderName(columnId) {
-        const column = this.gridOptions.columnApi.getColumn(columnId);
-        if (!column) {
-            return columnId;
-        }
-        const userHeaderName = this.getUserColDefProperty(column.getColId(), 'headerName');
-        return userHeaderName !== null && userHeaderName !== void 0 ? userHeaderName : StringExtensions_1.StringExtensions.CamelCaseToHumanText(column.getColDef().field);
-    }
     setupColumnFilter({ col, colDef }) {
         this.setColDefProperty(col, 'filter', () => {
             if (!colDef.filter) {
@@ -3168,21 +3295,24 @@ class Adaptable {
                     // change the Number format - if the scope allows it
                     if (this.api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
                         const options = formatColumn.DisplayFormat.Options;
-                        valueFormatter = (params) => FormatHelper_1.default.NumberFormatter(params.value, options);
+                        valueFormatter = (params) => {
+                            let value = params.value;
+                            return this.api.formatColumnApi.getNumberFormattedValue(value, options);
+                        };
                     }
                 }
                 if (formatColumn.DisplayFormat.Formatter === 'DateFormatter') {
                     // change the Date format - if the scope allows it
                     if (this.api.scopeApi.isColumnInDateScope(abColumn, formatColumn.Scope)) {
                         const options = formatColumn.DisplayFormat.Options;
-                        valueFormatter = (params) => FormatHelper_1.default.DateFormatter(params.value, options);
+                        valueFormatter = (params) => this.api.formatColumnApi.getDateFormattedValue(params.value, options);
                     }
                 }
                 if (formatColumn.DisplayFormat.Formatter === 'StringFormatter') {
                     // change the Date format - if the scope allows it
                     if (this.api.scopeApi.isColumnInStringsScope(abColumn, formatColumn.Scope)) {
                         const options = formatColumn.DisplayFormat.Options;
-                        valueFormatter = (params) => FormatHelper_1.default.StringFormatter(params.value, options);
+                        valueFormatter = (params) => this.api.formatColumnApi.getStringFormattedValue(params.value, options);
                     }
                 }
                 return valueFormatter;
@@ -3600,7 +3730,7 @@ class Adaptable {
     }
     getRowCount() {
         return this.gridOptions.rowData
-            ? this.gridOptions.rowData.length
+            ? this.getGridData().length
             : this.gridOptions.api.getDisplayedRowCount();
     }
     getColumnCount() {

package/src/agGrid/FilterWrapper.js

@@ -15,7 +15,7 @@ exports.FilterWrapperFactory = (adaptable) => {
         }
         isFilterActive() {
             //make the small filter icon to appear when there is a filter
-            return (adaptable.api.filterApi
+            return (adaptable.api.layoutApi
                 .getAllColumnFilter()
                 .findIndex((x) => x.ColumnId == this.params.column.getColId()) > -1);
         }