@adaptabletools/adaptable 11.0.9 → 11.1.1-canary.1

package/src/agGrid/Adaptable.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bindAdaptableAgGrid = exports.AdaptableNoCodeWizard = exports.Adaptable = void 0;
+exports.AdaptableNoCodeWizard = exports.Adaptable = void 0;
 const tslib_1 = require("tslib");
 const all_modules_1 = require("@ag-grid-community/all-modules");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
@@ -316,13 +316,6 @@ class Adaptable {
         this.runtimeConfig = runtimeConfig || {};
         this.agGridModules = this.runtimeConfig.modules || [];
         this.gridOptions = this.adaptableOptions.gridOptions;
-        if (this.hasAutogeneratedPrimaryKey() && !this.gridOptions.getRowNodeId) {
-            this.gridOptions.getRowNodeId = (rowData) => {
-                var _a;
-                rowData[GeneralConstants_1.AUTOGENERATED_PK_COLUMN] = (_a = rowData[GeneralConstants_1.AUTOGENERATED_PK_COLUMN]) !== null && _a !== void 0 ? _a : Uuid_1.createUuid();
-                return rowData[GeneralConstants_1.AUTOGENERATED_PK_COLUMN];
-            };
-        }
         if (this.gridOptions.allowContextMenuWithControlKey === undefined) {
             this.gridOptions.allowContextMenuWithControlKey = true;
         }
@@ -517,7 +510,7 @@ class Adaptable {
         LoggingHelper_1.LogAdaptableInfo(`Initializing AgGrid...`);
         // set up whether we use the getRowNode method or loop when finding a rowNode (former is preferable)
         // can only do that here as the gridOptions not yet set up
-        this.useRowNodeLookUp = this.agGridHelper.TrySetUpNodeIds();
+        this.useRowNodeLookUp = this.agGridHelper.TrySetUpNodeIds(this.hasAutogeneratedPrimaryKey());
         if (Array.isArray(this.gridOptions.columnDefs)) {
             this.gridOptions.columnDefs.forEach(assignColId);
         }
@@ -850,32 +843,10 @@ class Adaptable {
         return style;
     }
     getActiveAlertWithHighlightCell(col, params) {
-        const activeAlerts = this.api.internalApi
-            .getAdaptableAlerts()
-            .filter((alert) => {
-            var _a;
-            return ((_a = alert.alertDefinition.AlertProperties) === null || _a === void 0 ? void 0 : _a.HighlightCell) &&
-                alert.dataChangedInfo &&
-                alert.dataChangedInfo.column &&
-                alert.dataChangedInfo.column.columnId === col.columnId &&
-                alert.dataChangedInfo.rowNode === params.node;
-        });
-        if (!activeAlerts.length) {
-            return null;
-        }
-        return activeAlerts === null || activeAlerts === void 0 ? void 0 : activeAlerts[0];
+        return this.api.internalApi.getAdaptableAlertWithHighlightCell(col.columnId, params.node);
     }
     getActiveAlertWithHighlightRow(params) {
-        var _a;
-        return (_a = this.api.internalApi
-            .getAdaptableAlerts()
-            .filter((alert) => {
-            var _a;
-            return ((_a = alert.alertDefinition.AlertProperties) === null || _a === void 0 ? void 0 : _a.HighlightRow) &&
-                alert.dataChangedInfo &&
-                alert.dataChangedInfo.column &&
-                alert.dataChangedInfo.rowNode === params.node;
-        })) === null || _a === void 0 ? void 0 : _a[0];
+        return this.api.internalApi.getAdaptableAlertWithHighlightRow(params.node);
     }
     getAlertCellStyle(col, params) {
         const alert = this.getActiveAlertWithHighlightCell(col, params);
@@ -1062,12 +1033,15 @@ class Adaptable {
     }
     getPrimaryKeyValueFromRowNode(rowNode) {
         var _a;
+        if (!rowNode) {
+            return null;
+        }
         let gridApi = this.getGridOptionsApi();
         let result;
         if (gridApi && !this.hasAutogeneratedPrimaryKey()) {
             result = gridApi.getValue(this.adaptableOptions.primaryKey, rowNode);
         }
-        if ((result === null || result == undefined) && rowNode && rowNode.data) {
+        if ((result === null || result == undefined) && rowNode.data) {
             result = (_a = rowNode.data[this.adaptableOptions.primaryKey]) !== null && _a !== void 0 ? _a : null;
         }
         return result;
@@ -1282,10 +1256,13 @@ class Adaptable {
             shouldUpdateHeaders = this.setupColumnHeader(colSetupInfo) || shouldUpdateHeaders;
         });
         isChanged = isChanged || shouldUpdateHeaders;
-        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(layout.ExpandedRowGroupValues) &&
-            this.adaptableOptions.layoutOptions.includeExpandedRowGroups) {
+        if (this.api.layoutApi.areExpandedRowGroupsSavedInLayouts() &&
+            ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(layout.ExpandedRowGroupValues)) {
             this.expandRowGroupsForValues(layout.ExpandedRowGroupValues);
         }
+        if (this.adaptableOptions.layoutOptions.displayRowGroups === 'expanded') {
+            this.expandAllRowGroups();
+        }
         if (isChanged) {
             // it's important we set pivot mode
             // before we set column state
@@ -1404,7 +1381,7 @@ class Adaptable {
         }
         layout.EnablePivot = this.gridOptions.columnApi.isPivotMode();
         layout.PivotColumns = pivotColumns;
-        if (this.adaptableOptions.layoutOptions.includeExpandedRowGroups) {
+        if (this.api.layoutApi.areExpandedRowGroupsSavedInLayouts()) {
             layout.ExpandedRowGroupValues = this.getExpandRowGroupsKeys();
         }
         //  this.api.layoutApi.fireLayoutUpdatedEvent(layout, 'UpdatedLayout');
@@ -1506,25 +1483,27 @@ class Adaptable {
         this.agGridHelper.fireSelectionChangedEvent();
         return selectedRowInfo;
     }
-    setValue(dataChangedInfo) {
+    setValue(cellDataChangedInfo) {
         // note: because we use RowNode.setDataValue() this will cause Validation to fire
         // see https://www.ag-grid.com/javascript-data-grid/change-detection/#triggering-value-change-detection
         let newValue;
-        let dataType = dataChangedInfo.column.dataType;
+        let dataType = cellDataChangedInfo.column.dataType;
         newValue =
-            dataType == Enums_1.DataType.Number ? Number(dataChangedInfo.newValue) : dataChangedInfo.newValue;
+            dataType == Enums_1.DataType.Number
+                ? Number(cellDataChangedInfo.newValue)
+                : cellDataChangedInfo.newValue;
         if (dataType == undefined) {
             return; // no point continuing as probably a wrong  column
         }
-        if (dataChangedInfo.rowNode) {
-            dataChangedInfo.rowNode.setDataValue(dataChangedInfo.column.columnId, newValue);
+        if (cellDataChangedInfo.rowNode) {
+            cellDataChangedInfo.rowNode.setDataValue(cellDataChangedInfo.column.columnId, newValue);
         }
         else {
             if (this.useRowNodeLookUp) {
-                const rowNode = this.gridOptions.api.getRowNode(dataChangedInfo.primaryKeyValue);
+                const rowNode = this.gridOptions.api.getRowNode(cellDataChangedInfo.primaryKeyValue);
                 if (rowNode != null) {
-                    rowNode.setDataValue(dataChangedInfo.column.columnId, newValue);
-                    dataChangedInfo.rowNode = rowNode;
+                    rowNode.setDataValue(cellDataChangedInfo.column.columnId, newValue);
+                    cellDataChangedInfo.rowNode = rowNode;
                 }
             }
             else {
@@ -1532,9 +1511,9 @@ class Adaptable {
                 // prefer not to use this method but if we do then at least we can prevent further lookups once we find
                 this.gridOptions.api.getModel().forEachNode((rowNode) => {
                     if (!isUpdated) {
-                        if (dataChangedInfo.primaryKeyValue == this.getPrimaryKeyValueFromRowNode(rowNode)) {
-                            rowNode.setDataValue(dataChangedInfo.column.columnId, newValue);
-                            dataChangedInfo.rowNode = rowNode;
+                        if (cellDataChangedInfo.primaryKeyValue == this.getPrimaryKeyValueFromRowNode(rowNode)) {
+                            rowNode.setDataValue(cellDataChangedInfo.column.columnId, newValue);
+                            cellDataChangedInfo.rowNode = rowNode;
                             isUpdated = true;
                         }
                     }
@@ -1895,6 +1874,9 @@ class Adaptable {
         });
         return rowNodes;
     }
+    getRowsInViewport() {
+        return this.gridOptions.api.getRenderedNodes();
+    }
     selectNodes(rowNodes, clearSelection) {
         if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(rowNodes)) {
             rowNodes.forEach((node) => this.selectNode(node, clearSelection));
@@ -1945,19 +1927,17 @@ class Adaptable {
         this.gridOptions.api.refreshHeader();
     }
     redrawRow(rowNode) {
-        // in order to get a fresh reference to rowNode
-        // rowNode = this.getRowNodeForPrimaryKey(this.getPrimaryKeyValueFromRowNode(rowNode));
-        // if (!rowNode) {
-        //   return;
-        // }
+        this.redrawRows([rowNode]);
+    }
+    redrawRows(rowNodes) {
         const redrawRowsParams = {
-            rowNodes: [rowNode],
+            rowNodes,
         };
         try {
             this.gridOptions.api.redrawRows(redrawRowsParams);
         }
         catch (ex) {
-            LoggingHelper_1.ConsoleLogError('ag-grid redrawRows was unable to find some row nodes. Tried to redraw row node: ', rowNode, ex);
+            LoggingHelper_1.ConsoleLogError('ag-grid redrawRows was unable to find some row nodes. Tried to redraw row nodes: ', rowNodes, ex);
         }
     }
     refreshCells(rowNodes, columns, forceUpdate, suppressFlash = false) {
@@ -2589,26 +2569,22 @@ class Adaptable {
         this.gridOptions.isExternalFilterPresent = () => {
             const columnFilters = this.api.filterApi.getAllColumnFilter();
             const isFilterActive = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(columnFilters);
-            if (isFilterActive) {
-                // used in particular at init time to show the filter icon correctly
-                for (const colFilter of columnFilters) {
-                    const agGridCol = this.gridOptions.columnApi.getColumn(colFilter.ColumnId);
-                    if (agGridCol && !agGridCol.isFilterActive()) {
-                        agGridCol.setFilterActive(true);
-                    }
-                }
-            }
-            else {
-                (this.gridOptions.columnApi.getAllColumns() || []).forEach((col) => {
-                    if (col.isFilterActive()) {
-                        col.setFilterActive(false);
-                    }
-                });
-            }
             const isQueryActive = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.api.queryApi.getCurrentQuery());
-            // it means that originaldoesExternalFilterPass will be called so we reinit that collection
+            /**
+             * Changing the column filterState sync breaks the rendering of the custom filter component.
+             * I think that changing the column definition while ag-grid determines if a column is filtered
+             * breaks the logic of the custom component.
+             *
+             * Result:
+             * - custom filters in sate
+             * - refresh page, the ag-grid filter is rendered instead of adaptable custom-filter-component.
+             */
+            requestAnimationFrame(() => {
+                this.updateColumnFilterActiveState();
+            });
             return (isFilterActive ||
                 isQueryActive ||
+                // it means that originaldoesExternalFilterPass will be called so we reinit that collection
                 (originalisExternalFilterPresent ? originalisExternalFilterPresent() : false));
         };
         const originaldoesExternalFilterPass = this.gridOptions.doesExternalFilterPass;
@@ -2660,6 +2636,26 @@ class Adaptable {
         };
         this.prepareGrid();
     }
+    updateColumnFilterActiveState() {
+        const columnFilters = this.api.filterApi.getAllColumnFilter();
+        const isFilterActive = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(columnFilters);
+        if (isFilterActive) {
+            // used in particular at init time to show the filter icon correctly
+            for (const colFilter of columnFilters) {
+                const agGridCol = this.gridOptions.columnApi.getColumn(colFilter.ColumnId);
+                if (agGridCol && !agGridCol.isFilterActive()) {
+                    agGridCol.setFilterActive(true);
+                }
+            }
+        }
+        else {
+            (this.gridOptions.columnApi.getAllColumns() || []).forEach((col) => {
+                if (col.isFilterActive()) {
+                    col.setFilterActive(false);
+                }
+            });
+        }
+    }
     buildStandaloneColumnHeader(adaptableColumn) {
         return this.agGridMenuHelper.buildStandaloneColumnHeader(adaptableColumn);
     }
@@ -2869,6 +2865,7 @@ class Adaptable {
     setupColumnCellEditor({ colId, col }) {
         const adaptableColumn = this.api.columnApi.getColumnFromId(colId);
         const editLookUpItem = this.api.userInterfaceApi.getEditLookUpItemForColumn(adaptableColumn);
+        const hasRichSelectCellEditor = this.isModulePresent('rich-select');
         this.setColDefProperty(col, 'cellEditor', () => {
             var _a;
             const formatColumn = this.api.formatColumnApi.getFormatColumnForColumn(adaptableColumn);
@@ -2876,9 +2873,14 @@ class Adaptable {
                 return CheckboxRenderer_1.CheckboxEditor;
             }
             if (editLookUpItem) {
-                return this.isModulePresent('rich-select')
-                    ? 'agRichSelectCellEditor'
-                    : 'agSelectCellEditor';
+                return hasRichSelectCellEditor ? 'agRichSelectCellEditor' : 'agSelectCellEditor';
+            }
+        });
+        this.setColDefProperty(col, 'cellEditorPopup', () => {
+            // as specified in https://www.ag-grid.com/react-data-grid/provided-cell-editors/#rich-select-cell-editor
+            // agRichSelectCellEditor should always set cellEditorPopup=true. Otherwise the editor will be clipped to the cell contents
+            if (editLookUpItem && hasRichSelectCellEditor) {
+                return true;
             }
         });
         this.setColDefProperty(col, 'cellEditorParams', (params) => {
@@ -3091,7 +3093,7 @@ class Adaptable {
                     }
                     return true;
                 }
-                const dataChangedInfo = this.api.internalApi.buildDataChangedInfo({
+                const cellDataChangedInfo = this.api.internalApi.buildDataChangedInfo({
                     oldValue: params.oldValue,
                     newValue: params.newValue,
                     column: this.api.columnApi.getColumnFromId(params.column.getColId()),
@@ -3099,15 +3101,15 @@ class Adaptable {
                     rowNode: params.node,
                     trigger: 'edit',
                 });
-                if (dataChangedInfo.oldValue === dataChangedInfo.newValue) {
+                if (cellDataChangedInfo.oldValue === cellDataChangedInfo.newValue) {
                     return true;
                 }
-                if (!this.ValidationService.performValidation(dataChangedInfo)) {
+                if (!this.ValidationService.performValidation(cellDataChangedInfo)) {
                     return false;
                 }
                 const onServerValidationCompleted = () => { };
                 if ((_a = this.adaptableOptions.editOptions) === null || _a === void 0 ? void 0 : _a.validateOnServer) {
-                    this.ValidationService.performServerValidation(dataChangedInfo, {
+                    this.ValidationService.performServerValidation(cellDataChangedInfo, {
                         onServerValidationCompleted,
                     })();
                 }
@@ -3176,13 +3178,13 @@ class Adaptable {
             return;
         }
         // rowNode = this.getRowNodeForPrimaryKey(primaryKeyValue);
-        let dataChangedInfos = [];
+        let cellDataChangedInfos = [];
         Object.keys(oldData).forEach((key) => {
             if (this.api.columnApi.doesColumnExist(key)) {
                 const oldValue = oldData[key];
                 const newValue = newData[key];
                 if (oldValue != newValue) {
-                    const dataChangedInfo = this.api.internalApi.buildDataChangedInfo({
+                    const cellDataChangedInfo = this.api.internalApi.buildDataChangedInfo({
                         oldValue: oldValue,
                         newValue: newValue,
                         column: this.api.columnApi.getColumnFromId(key),
@@ -3190,14 +3192,14 @@ class Adaptable {
                         rowNode: rowNode,
                         trigger: 'tick',
                     });
-                    if (this.isUndoChange(dataChangedInfo)) {
-                        dataChangedInfo.trigger = 'undo';
+                    if (this.isUndoChange(cellDataChangedInfo)) {
+                        cellDataChangedInfo.trigger = 'undo';
                     }
-                    dataChangedInfos.push(dataChangedInfo);
+                    cellDataChangedInfos.push(cellDataChangedInfo);
                 }
             }
         });
-        this.performPostEditChecks(dataChangedInfos);
+        this.performPostEditChecks(cellDataChangedInfos);
     }
     onCellDataChanged({ rowNode, oldValue, newValue, colId, }) {
         if (oldValue == newValue) {
@@ -3208,7 +3210,7 @@ class Adaptable {
             return;
         }
         if (this.isGroupRowNode(rowNode)) {
-            const dataChangedInfo = this.api.internalApi.buildDataChangedInfo({
+            const cellDataChangedInfo = this.api.internalApi.buildDataChangedInfo({
                 oldValue: oldValue,
                 newValue: newValue,
                 column: abColumn,
@@ -3220,14 +3222,14 @@ class Adaptable {
                 rowNode: rowNode,
                 trigger: 'aggChange',
             });
-            this.DataService.CreateDataChangedEvent(dataChangedInfo);
+            this.DataService.CreateDataChangedEvent(cellDataChangedInfo);
             return;
         }
         const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(rowNode);
         if (!primaryKeyValue) {
             return;
         }
-        const dataChangedInfo = this.api.internalApi.buildDataChangedInfo({
+        const cellDataChangedInfo = this.api.internalApi.buildDataChangedInfo({
             oldValue: oldValue,
             newValue: newValue,
             column: abColumn,
@@ -3235,10 +3237,10 @@ class Adaptable {
             rowNode: rowNode,
             trigger: 'edit',
         });
-        if (this.isUndoChange(dataChangedInfo)) {
-            dataChangedInfo.trigger = 'undo';
+        if (this.isUndoChange(cellDataChangedInfo)) {
+            cellDataChangedInfo.trigger = 'undo';
         }
-        this.performPostEditChecks([dataChangedInfo]);
+        this.performPostEditChecks([cellDataChangedInfo]);
     }
     isUndoChange(dataChange) {
         // check if this is not a reverted change
@@ -3248,20 +3250,20 @@ class Adaptable {
     /**
      * There are a few things that we need to do AFTER we edit a cell and it makes sense to put them in one place
      */
-    performPostEditChecks(dataChangedInfos) {
-        const firstInfo = dataChangedInfos[0];
+    performPostEditChecks(cellDataChangedInfos) {
+        const firstInfo = cellDataChangedInfos[0];
         if (!firstInfo || !firstInfo.rowNode) {
             return;
         }
-        dataChangedInfos.forEach((dataChangedInfo) => {
-            if (dataChangedInfo.trigger === 'undo') {
-                LoggingHelper_1.LogAdaptableInfo(`Undo data change: PK(${dataChangedInfo.primaryKeyValue}) Col(${dataChangedInfo.column}) RevertedValue(${dataChangedInfo.oldValue}) OriginalValue(${dataChangedInfo.newValue})`);
+        cellDataChangedInfos.forEach((cellDataChangedInfo) => {
+            if (cellDataChangedInfo.trigger === 'undo') {
+                LoggingHelper_1.LogAdaptableInfo(`Undo data change: PK(${cellDataChangedInfo.primaryKeyValue}) Col(${cellDataChangedInfo.column}) RevertedValue(${cellDataChangedInfo.oldValue}) OriginalValue(${cellDataChangedInfo.newValue})`);
             }
-            if (dataChangedInfo.trigger === 'edit' || dataChangedInfo.trigger === 'undo') {
-                this.checkChangedCellCurrentlySelected(dataChangedInfo);
-                this.api.freeTextColumnApi.checkFreeTextColumnForDataChange(dataChangedInfo);
+            if (cellDataChangedInfo.trigger === 'edit' || cellDataChangedInfo.trigger === 'undo') {
+                this.checkChangedCellCurrentlySelected(cellDataChangedInfo);
+                this.api.freeTextColumnApi.checkFreeTextColumnForDataChange(cellDataChangedInfo);
             }
-            this.DataService.CreateDataChangedEvent(dataChangedInfo);
+            this.DataService.CreateDataChangedEvent(cellDataChangedInfo);
         });
         // if node is visible then check if need to refresh other columns / whole row if the updating column is:
         // 1. referenced in Conditional Styles that have Expressions (refreshing whole row if Scope is All)
@@ -3271,12 +3273,12 @@ class Adaptable {
                 wholeRow: false,
                 columnIds: new Set(),
             };
-            this.getExpressionStylesChanges(dataChangedScope, dataChangedInfos);
+            this.getExpressionStylesChanges(dataChangedScope, cellDataChangedInfos);
             if (dataChangedScope.wholeRow) {
                 this.redrawRow(firstInfo.rowNode);
             }
             else {
-                this.getFormatColumnComparisonChanges(dataChangedScope, dataChangedInfos);
+                this.getFormatColumnComparisonChanges(dataChangedScope, cellDataChangedInfos);
                 if (dataChangedScope.columnIds.size > 0) {
                     this.refreshCells([firstInfo.rowNode], Array.from(dataChangedScope.columnIds.values()), true);
                 }
@@ -3284,17 +3286,17 @@ class Adaptable {
         }
         firstInfo.trigger == 'tick' ? this.filterOnTickingDataChange() : this.filterOnEditDataChange();
     }
-    getExpressionStylesChanges(dataChangedScope, dataChangedInfos) {
+    getExpressionStylesChanges(dataChangedScope, cellDataChangedInfos) {
         const stylesWithExpression = this.api.conditionalStyleApi.getConditionalStylesWithExpression();
         if (ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(stylesWithExpression)) {
             return;
         }
-        dataChangedInfos.forEach((dataChangedInfo) => {
+        cellDataChangedInfos.forEach((cellDataChangedInfo) => {
             if (!dataChangedScope.wholeRow) {
                 stylesWithExpression.forEach((conditionalStyle) => {
                     if (!dataChangedScope.wholeRow) {
                         const columnIds = this.api.queryLanguageApi.getColumnsFromExpression(conditionalStyle.Rule.BooleanExpression);
-                        if (columnIds.includes(dataChangedInfo.column.columnId)) {
+                        if (columnIds.includes(cellDataChangedInfo.column.columnId)) {
                             if (this.api.scopeApi.scopeIsAll(conditionalStyle.Scope)) {
                                 dataChangedScope.wholeRow = true;
                                 return;
@@ -3313,14 +3315,14 @@ class Adaptable {
             }
         });
     }
-    getFormatColumnComparisonChanges(dataChangedScope, dataChangedInfos) {
+    getFormatColumnComparisonChanges(dataChangedScope, cellDataChangedInfos) {
         this.api.formatColumnApi.getAllFormatColumn().forEach((fc) => {
             let columnComparision = this.api.formatColumnApi.getColumnComparisonForFormatColumn(fc);
             if (columnComparision) {
                 let affectedColumnIds = this.api.formatColumnApi.getColumnIdsFromColumnComparison(columnComparision);
                 if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(affectedColumnIds)) {
-                    dataChangedInfos.forEach((dataChangedInfo) => {
-                        if (affectedColumnIds.includes(dataChangedInfo.column.columnId)) {
+                    cellDataChangedInfos.forEach((cellDataChangedInfo) => {
+                        if (affectedColumnIds.includes(cellDataChangedInfo.column.columnId)) {
                             this.api.scopeApi
                                 .getColumnsForScope(fc.Scope)
                                 .map((c) => c.columnId)
@@ -3333,18 +3335,18 @@ class Adaptable {
             }
         });
     }
-    checkChangedCellCurrentlySelected(dataChangedInfo) {
+    checkChangedCellCurrentlySelected(cellDataChangedInfo) {
         let selectedCellInfo = this.api.gridApi.getSelectedCellInfo();
         if (selectedCellInfo && ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(selectedCellInfo.gridCells)) {
-            let matchingCell = selectedCellInfo.gridCells.find((gc) => gc.primaryKeyValue == dataChangedInfo.primaryKeyValue &&
-                gc.column == dataChangedInfo.column);
+            let matchingCell = selectedCellInfo.gridCells.find((gc) => gc.primaryKeyValue == cellDataChangedInfo.primaryKeyValue &&
+                gc.column == cellDataChangedInfo.column);
             if (matchingCell) {
                 this.setSelectedCells();
             }
         }
         let selectedRowInfo = this.api.gridApi.getSelectedRowInfo();
         if (selectedRowInfo && ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(selectedRowInfo.gridRows)) {
-            let matchingRow = selectedRowInfo.gridRows.find((gr) => gr.primaryKeyValue == dataChangedInfo.primaryKeyValue);
+            let matchingRow = selectedRowInfo.gridRows.find((gr) => gr.primaryKeyValue == cellDataChangedInfo.primaryKeyValue);
             if (matchingRow) {
                 this.setSelectedRows();
             }
@@ -3429,7 +3431,7 @@ class Adaptable {
     }
     getExpandRowGroupsKeys() {
         let returnValues = [];
-        if (this.adaptableOptions.layoutOptions.includeExpandedRowGroups) {
+        if (this.api.layoutApi.areExpandedRowGroupsSavedInLayouts()) {
             this.gridOptions.api.forEachNode((node) => {
                 if (node.group && node.expanded) {
                     let current = node;
@@ -4307,7 +4309,3 @@ class AdaptableNoCodeWizard {
     }
 }
 exports.AdaptableNoCodeWizard = AdaptableNoCodeWizard;
-exports.bindAdaptableAgGrid = (gridReadyEvent, gridOptions) => {
-    gridOptions.api = gridReadyEvent.api;
-    gridOptions.columnApi = gridReadyEvent.columnApi;
-};

package/src/agGrid/agGridHelper.d.ts

@@ -20,7 +20,7 @@ export declare class agGridHelper {
     getAgGridLightThemeName(): string;
     getAgGridDarkThemeName(): string;
     setUpModules(): Map<AdaptableModule, IModule>;
-    TrySetUpNodeIds(): boolean;
+    TrySetUpNodeIds(hasAutogeneratedPrimaryKey: boolean): boolean;
     createCheckboxRendererComp(columnId: string, isColumnReadOnly: boolean): ICellRendererFunc | undefined;
     createPercentBarRendererComp(formatColumn: FormatColumn): ICellRendererFunc;
     getCleanValue(value: string): string | undefined;

package/src/agGrid/agGridHelper.js

@@ -39,6 +39,7 @@ const FlashingCellModule_1 = require("../Strategy/FlashingCellModule");
 const SettingsPanelModule_1 = require("../Strategy/SettingsPanelModule");
 const ChartingModule_1 = require("../Strategy/ChartingModule");
 const PercentBarRenderer_1 = require("./PercentBarRenderer");
+const Helper_1 = require("../Utilities/Helpers/Helper");
 const tinycolor = require('tinycolor2');
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
@@ -99,21 +100,35 @@ class agGridHelper {
         modules.set(ModuleConstants.ChartingModuleId, new ChartingModule_1.ChartingModule(api));
         return modules;
     }
-    TrySetUpNodeIds() {
+    TrySetUpNodeIds(hasAutogeneratedPrimaryKey) {
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(this.adaptable.adaptableOptions.primaryKey)) {
             // if no valid pk then always false
             return false;
         }
-        // need some way of checking if running on client on server: if on server then we return false
-        if (this.gridOptions.getRowNodeId != null) {
+        if (Helper_1.Helper.objectExists(this.gridOptions.getRowNodeId) ||
+            Helper_1.Helper.objectExists(this.gridOptions.getRowId)) {
+            // if the user provided a getRowNodeId/getRowId then we don't need to do anything
+            // Note: starting with 27.1.0 'getRowNodeId' method is deprecated and will be removed in future versions
             return true;
         }
-        // also we can check if they have done it
         const primaryKey = this.adaptable.adaptableOptions.primaryKey;
-        // otherwise lets set the Id so that it returns the primaryKey
-        this.gridOptions.getRowNodeId = function (data) {
-            return data[primaryKey];
-        };
+        if (hasAutogeneratedPrimaryKey) {
+            this.gridOptions.getRowId = (params) => {
+                // if the PK value is autogenerated, we need to make sure that the rowData has a valid PK value
+                // this should be taken care of in the Adaptable.[loadDataSource/setDataSource/updateRows]() methods, but the users will always make silly decisions
+                // so just to be safe we'll check here and add a PK value is missing
+                // thus adding a side-effect in a getter, but what can we do against it?! :)
+                if (Helper_1.Helper.objectNotExists(params.data[primaryKey])) {
+                    params.data[primaryKey] = Uuid_1.createUuid();
+                }
+                return params.data[primaryKey];
+            };
+        }
+        else {
+            this.gridOptions.getRowId = (params) => {
+                return params.data[primaryKey];
+            };
+        }
         return true;
     }
     createCheckboxRendererComp(columnId, isColumnReadOnly) {

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -117,7 +117,7 @@ class AdaptableDateEditor {
         react_dom_1.unmountComponentAtNode(this.el);
     }
     shouldClearExistingValue(params) {
-        return params.key === all_modules_1.KeyCode.BACKSPACE || params.key === all_modules_1.KeyCode.DELETE;
+        return params.eventKey === all_modules_1.KeyCode.BACKSPACE || params.eventKey === all_modules_1.KeyCode.DELETE;
     }
 }
 exports.AdaptableDateEditor = AdaptableDateEditor;

package/src/agGrid/editors/AdaptableNumberEditor/index.js

@@ -93,7 +93,7 @@ class AdaptableNumberEditor {
         react_dom_1.unmountComponentAtNode(this.el);
     }
     shouldClearExistingValue(params) {
-        return params.key === all_modules_1.KeyCode.BACKSPACE || params.key === all_modules_1.KeyCode.DELETE;
+        return params.eventKey === all_modules_1.KeyCode.BACKSPACE || params.eventKey === all_modules_1.KeyCode.DELETE;
     }
 }
 exports.AdaptableNumberEditor = AdaptableNumberEditor;

package/src/components/Dialog/index.js

@@ -105,7 +105,7 @@ exports.Dialog = React.forwardRef((props, ref) => {
             e.nativeEvent.preventDialogDismiss = true;
         }
     };
-    const box = (React.createElement(rebass_1.Box, Object.assign({ tabIndex: 0 }, boxProps, { onClick: (e) => {
+    const box = (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { onClick: (e) => {
             setPreventDismissFlag(e);
             if (boxProps && boxProps.onClick) {
                 boxProps.onClick(e);

package/src/components/Modal/index.js

@@ -32,7 +32,7 @@ exports.Modal = (props) => {
     const counter = react_1.useMemo(() => globalCounter++, [isOpen]);
     const openTimestamp = counter;
     const backdropZIndexOffset = props.backdropZIndexOffset || 1;
-    const zIndex = (props.baseZIndex || 1000) + counter;
+    const zIndex = (props.baseZIndex || 2000) + counter;
     return react_dom_1.createPortal(isOpen ? (React.createElement(React.Fragment, null,
         React.createElement(Backdrop_1.default, { timestamp: openTimestamp, uuid: uuid, zIndex: zIndex - backdropZIndexOffset, onBringToFront: onBringToFront }),
         React.createElement(react_remove_scroll_1.RemoveScroll, null,

package/src/components/WindowModal/WindowModal.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
+export declare type WindowModalSize = {
+    width: number;
+    height: number;
+};
+export declare type WindowModalPosition = {
+    x: number;
+    y: number;
+};
 export interface WindowModalProps {
     handleSelector: string;
-    size: {
-        width: number;
-        height: number;
-    };
-    position?: {
-        x: number;
-        y: number;
-    };
+    size: WindowModalSize;
+    position?: WindowModalPosition;
     onChange: (settings: {
         size: {
             width: number;