@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.2

package/src/Strategy/LayoutModule.js

@@ -15,9 +15,40 @@ const LayoutWizard_1 = require("../View/Layout/Wizard/LayoutWizard");
 const getLayoutFilterViewItems_1 = require("./Utilities/Layout/getLayoutFilterViewItems");
 const getLayoutSortViewItems_1 = require("./Utilities/Layout/getLayoutSortViewItems");
 const AggregationColumns_1 = require("../PredefinedConfig/Common/AggregationColumns");
+const windowFactory_1 = require("../View/Components/Popups/WindowPopups/windowFactory");
+const flattenDeep_1 = tslib_1.__importDefault(require("lodash/flattenDeep"));
 class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.LayoutModuleId, ModuleConstants.LayoutFriendlyName, 'layout', 'LayoutPopup', 'Named sets of column visibility, order, groupings, aggregation, pivots etc.', api);
+        this.clearUnsuportedFeaturesFromLayout = (layout) => {
+            const layoutSupportedFeatures = this.api.layoutApi.internalApi.getLayoutSupportedFeatures();
+            let needsUpdate = false;
+            const layoutToSave = Object.assign({}, layout);
+            if (!layoutSupportedFeatures.RowGroupedColumns && layout.RowGroupedColumns) {
+                delete layoutToSave.RowGroupedColumns;
+                needsUpdate = true;
+            }
+            if (!layoutSupportedFeatures.AggregationColumns && layout.AggregationColumns) {
+                delete layoutToSave.AggregationColumns;
+                needsUpdate = true;
+            }
+            if (!layoutSupportedFeatures.PivotColumns && layout.PivotColumns) {
+                delete layoutToSave.PivotColumns;
+                delete layoutToSave.EnablePivot;
+                needsUpdate = true;
+            }
+            if (!layoutSupportedFeatures.ColumnFilters && layout.ColumnFilters) {
+                delete layoutToSave.ColumnFilters;
+                needsUpdate = true;
+            }
+            if (!layoutSupportedFeatures.ColumnSorts && layout.ColumnSorts) {
+                delete layoutToSave.ColumnSorts;
+                needsUpdate = true;
+            }
+            if (needsUpdate) {
+                this.api.layoutApi.createOrUpdateLayout(layoutToSave);
+            }
+        };
         this.api.eventApi.on('LayoutChanged', (layoutChangedInfo) => {
             var _a;
             if (layoutChangedInfo.newLayoutState.CurrentLayout !==
@@ -27,8 +58,19 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             }
         });
     }
+    updateOldConfig() {
+        /**
+         * Viewport mode does not support a few
+         * features instead of complicating the
+         * logic where layout is applied, it is easier and
+         * less error prone to just remove it.
+         */
+        if (this.api.internalApi.getAdaptableInstance().getRowModel() === 'viewport') {
+            this.api.layoutApi.getLayouts().forEach(this.clearUnsuportedFeaturesFromLayout);
+        }
+    }
     getModuleAdaptableObjects() {
-        return this.api.layoutApi.getAllLayout();
+        return this.api.layoutApi.getLayouts();
     }
     getExplicitlyReferencedColumnIds(layout) {
         const columnIds = [];
@@ -47,7 +89,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     getTeamSharingReferences(adaptableObject) {
         const teamSharingReferences = super.getTeamSharingReferences(adaptableObject);
         const layoutName = adaptableObject.Name;
-        if (this.api.internalApi.hasLayoutSpecificObjects() && !!layoutName) {
+        if (this.api.layoutApi.internalApi.hasLayoutSpecificObjects() && !!layoutName) {
             const layoutAssociatedObjectReferences = [];
             const loadConfig = {
                 associatedWithLayout: layoutName,
@@ -57,11 +99,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 Reference: alertDefinition,
                 Module: 'Alert',
             }));
-            this.api.conditionalStyleApi.getAllConditionalStyle(loadConfig).forEach((conditionalStyle) => layoutAssociatedObjectReferences.push({
-                Reference: conditionalStyle,
-                Module: 'ConditionalStyle',
-            }));
-            this.api.customSortApi.getAllCustomSort(loadConfig).forEach((customSort) => layoutAssociatedObjectReferences.push({
+            this.api.customSortApi.getCustomSorts(loadConfig).forEach((customSort) => layoutAssociatedObjectReferences.push({
                 Reference: customSort,
                 Module: 'CustomSort',
             }));
@@ -69,7 +107,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 Reference: flashingCell,
                 Module: 'FlashingCell',
             }));
-            this.api.formatColumnApi.getAllFormatColumn(loadConfig).forEach((formatColumn) => layoutAssociatedObjectReferences.push({
+            this.api.formatColumnApi.getFormatColumns(loadConfig).forEach((formatColumn) => layoutAssociatedObjectReferences.push({
                 Reference: formatColumn,
                 Module: 'FormatColumn',
             }));
@@ -77,16 +115,16 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 Reference: plusMinusNudge,
                 Module: 'PlusMinus',
             }));
-            this.api.shortcutApi.getAllShortcut(loadConfig).forEach((shortcut) => layoutAssociatedObjectReferences.push({
+            this.api.shortcutApi.getShortcuts(loadConfig).forEach((shortcut) => layoutAssociatedObjectReferences.push({
                 Reference: shortcut,
                 Module: 'Shortcut',
             }));
             [
-                ...this.api.scheduleApi.getAllReportSchedule(loadConfig),
-                ...this.api.scheduleApi.getAllReminderSchedule(loadConfig),
-                ...this.api.scheduleApi.getAllGlue42Schedule(loadConfig),
-                ...this.api.scheduleApi.getAllIPushPullSchedule(loadConfig),
-                ...this.api.scheduleApi.getAllOpenFinSchedule(loadConfig),
+                ...this.api.scheduleApi.getReportSchedules(loadConfig),
+                ...this.api.scheduleApi.getReminderSchedules(loadConfig),
+                ...this.api.scheduleApi.getGlue42Schedules(loadConfig),
+                ...this.api.scheduleApi.getIPushPullSchedules(loadConfig),
+                ...this.api.scheduleApi.getOpenFinSchedules(loadConfig),
             ].forEach((schedule) => layoutAssociatedObjectReferences.push({
                 Reference: schedule,
                 Module: 'Schedule',
@@ -100,7 +138,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     }
     handleAdaptableReady() {
         requestAnimationFrame(() => {
-            this.api.layoutApi.fireLayoutChangedEvent('ADAPTABLE_READY', null, this.api.layoutApi.getLayoutState());
+            this.api.layoutApi.internalApi.fireLayoutChangedEvent('ADAPTABLE_READY', null, this.api.layoutApi.getLayoutState());
         });
     }
     addColumnMenuItems(column) {
@@ -191,11 +229,80 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 });
             }
         }
+        const viewPivotItemsMenuItem = this.createViewPivotItemsMenuItem(menuContext);
+        if (viewPivotItemsMenuItem) {
+            returnColumnMenuItems.push(viewPivotItemsMenuItem);
+        }
         return returnColumnMenuItems;
     }
+    createViewPivotItemsMenuItem(menuContext) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        // current group => menuContext.rowNode.field;
+        if (((_b = (_a = menuContext.selectedCellInfo) === null || _a === void 0 ? void 0 : _a.gridCells) === null || _b === void 0 ? void 0 : _b.length) !== 1) {
+            return;
+        }
+        const currentLayout = this.api.layoutApi.getCurrentLayout();
+        if (!currentLayout.EnablePivot) {
+            return;
+        }
+        const { agGridColumn } = menuContext;
+        const columnId = agGridColumn.getColId();
+        const isPivotColumn = this.api.columnApi.isAutoPivotColumn(columnId);
+        if (!isPivotColumn && this.api.columnApi.getColumnDataTypeForColumnId(columnId) !== 'Number') {
+            return;
+        }
+        /**
+         * Cannot base the values on the pivot column id, because the value or the field may have underscrores
+         *
+         *
+         * e.g. pivot_license_MIT License_stargazers_count
+         */
+        // pivot_status_Booked_price
+        // price
+        const aggColumn = (_f = (_e = (_d = (_c = agGridColumn === null || agGridColumn === void 0 ? void 0 : agGridColumn.getColDef) === null || _c === void 0 ? void 0 : _c.call(agGridColumn).pivotValueColumn) === null || _d === void 0 ? void 0 : _d.getColDef) === null || _e === void 0 ? void 0 : _e.call(_d)) === null || _f === void 0 ? void 0 : _f.field;
+        // Booked
+        const pivotValue = (_j = (_h = (_g = agGridColumn === null || agGridColumn === void 0 ? void 0 : agGridColumn.getColDef) === null || _g === void 0 ? void 0 : _g.call(agGridColumn)) === null || _h === void 0 ? void 0 : _h.pivotKeys) === null || _j === void 0 ? void 0 : _j[0];
+        // status - the preview works only with one column
+        const pivotColumnId = (_k = currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.PivotColumns) === null || _k === void 0 ? void 0 : _k[0];
+        function getData(rows) {
+            return [
+                ...rows.map((row) => {
+                    if (row.childrenAfterFilter) {
+                        return getData(row.childrenAfterFilter);
+                    }
+                    return row.data;
+                }),
+            ];
+        }
+        const data = (0, flattenDeep_1.default)(getData(menuContext.rowNode.childrenAfterFilter));
+        const rowGroups = currentLayout.RowGroupedColumns;
+        const cellValue = isPivotColumn
+            ? menuContext.rowNode.aggData[columnId]
+            : menuContext.gridCell.displayValue;
+        const popupProps = {
+            hasPivotValue: isPivotColumn,
+            columnId,
+            rowGroups,
+            rows: data,
+            layout: currentLayout,
+            aggColumn,
+            pivotValue,
+            pivotColumnId,
+        };
+        return {
+            isVisible: true,
+            label: 'Expand Aggregated Value',
+            onClick: () => {
+                this.api.internalApi.showPopupWindow(windowFactory_1.SHOW_PIVOT_COLUMN_DETAILS, `Rows for Aggregated Value: ${cellValue}`, undefined, popupProps);
+            },
+            icon: {
+                name: 'arrowexpand',
+            },
+        };
+    }
     getTeamSharingAction() {
         return {
-            ModuleEntities: this.api.layoutApi.getAllLayout(),
+            ModuleEntities: this.api.layoutApi.getLayouts(),
             AddAction: LayoutRedux.LayoutAdd,
             EditAction: LayoutRedux.LayoutSave,
         };
@@ -204,10 +311,10 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         return this.getModuleAdaptableObjects().map((layout) => this.toView(layout));
     }
     toView(layout) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const maxColumnsToDisplay = (_d = (_c = (_b = (_a = this.api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.layoutOptions) === null || _b === void 0 ? void 0 : _b.layoutViewOptions) === null || _c === void 0 ? void 0 : _c.maxColumnsToDisplay) !== null && _d !== void 0 ? _d : 10;
         const columnIdToFriendlyName = (columnId) => {
-            return this.api.columnApi.getFriendlyNameFromColumnId(columnId);
+            return this.api.columnApi.getFriendlyNameForColumnId(columnId);
         };
         let columns = layout.Columns.filter((c) => !this.api.columnApi.isAutoRowGroupColumn(c)).filter((c) => !this.api.columnApi.isAutoPivotColumn(c));
         if (columns.length >
@@ -231,17 +338,23 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                     name: 'Layout Grid Type',
                     values: [(layout === null || layout === void 0 ? void 0 : layout.EnablePivot) ? 'Pivot' : 'Table'],
                 },
-                {
+                /**
+                 * Hide pivot columns.
+                 *
+                 * The generated pivot columns cannot be prevented from beeing on the layout object.
+                 * When they are removed/not added, they no longer apear in the grid.
+                 */
+                !layout.EnablePivot && {
                     name: 'Columns',
                     values: columns,
                 },
                 ((_e = layout.ColumnSorts) === null || _e === void 0 ? void 0 : _e.length) && (0, getLayoutSortViewItems_1.getLayoutSortViewItems)(layout, this.api),
-                (layout === null || layout === void 0 ? void 0 : layout.ColumnFilters) && (0, getLayoutFilterViewItems_1.getLayoutFilterViewItems)(layout, this.api),
-                ((_f = layout === null || layout === void 0 ? void 0 : layout.RowGroupedColumns) === null || _f === void 0 ? void 0 : _f.length) && {
+                ((_f = layout === null || layout === void 0 ? void 0 : layout.ColumnFilters) === null || _f === void 0 ? void 0 : _f.length) && (0, getLayoutFilterViewItems_1.getLayoutFilterViewItems)(layout, this.api),
+                ((_g = layout === null || layout === void 0 ? void 0 : layout.RowGroupedColumns) === null || _g === void 0 ? void 0 : _g.length) && {
                     name: 'Grouped Columns',
                     values: layout.RowGroupedColumns.map((colId) => columnIdToFriendlyName(colId)),
                 },
-                ((_g = layout === null || layout === void 0 ? void 0 : layout.PivotColumns) === null || _g === void 0 ? void 0 : _g.length) && {
+                ((_h = layout === null || layout === void 0 ? void 0 : layout.PivotColumns) === null || _h === void 0 ? void 0 : _h.length) && {
                     name: 'Pivot Columns',
                     values: layout.PivotColumns.map((colId) => columnIdToFriendlyName(colId)),
                 },
@@ -281,7 +394,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             getEditWizard: () => LayoutWizard_1.LayoutWizard,
             getStatusBarPanelProps: () => {
                 const text = this.api.layoutApi.getCurrentLayoutName();
-                const layouts = this.api.layoutApi.getAllLayout();
+                const layouts = this.api.layoutApi.getLayouts();
                 const popover = layouts.length > 1 ? LayoutStatusBarSubPanelPopover_1.LayoutStatusBarSubPanelPopover : null;
                 return {
                     content: text,
@@ -293,7 +406,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         };
     }
     handleLayoutChange() {
-        if (!this.api.internalApi.hasLayoutSpecificObjects()) {
+        if (!this.api.layoutApi.internalApi.hasLayoutSpecificObjects()) {
             // no need if no callback implementation is provided or no auto checking
             return;
         }
@@ -312,7 +425,7 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             .getModuleService()
             .getModuleById('Schedule')
             .setUpScheduleJobs();
-        // ConditionalStyle, CustomSort, FlashingCell, FormatColumn
+        // CustomSort, FlashingCell, FormatColumn
         // we need to refresh the column defs, as some configs may have changed
         this.api.internalApi.getAdaptableInstance().setupColumns();
     }

package/src/Strategy/PlusMinusModule.js

@@ -34,7 +34,7 @@ class PlusMinusModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         if (!((_a = plusMinusNudge.Rule) === null || _a === void 0 ? void 0 : _a.BooleanExpression)) {
             return [];
         }
-        return this.api.queryApi.getReferencedNamedQueryNames((_b = plusMinusNudge.Rule) === null || _b === void 0 ? void 0 : _b.BooleanExpression);
+        return this.api.queryApi.internalApi.getReferencedNamedQueryNames((_b = plusMinusNudge.Rule) === null || _b === void 0 ? void 0 : _b.BooleanExpression);
     }
     handleAdaptableReady() {
         let plusMinusNudges = this.api.plusMinusApi.getAllPlusMinus();
@@ -96,7 +96,7 @@ class PlusMinusModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 plusMinusNudges.forEach((pmr) => {
                     if (!foundRule) {
                         if (this.api.scopeApi.isColumnInScope(gridCell.column, pmr.Scope)) {
-                            if (this.api.gridApi.areCellsEditable([gridCell])) {
+                            if (this.api.gridApi.isCellEditable(gridCell)) {
                                 //for aggrid as we are getting strings sometimes
                                 if (typeof gridCell.rawValue != 'number') {
                                     gridCell.rawValue = parseFloat(gridCell.rawValue);

package/src/Strategy/QueryModule.js

@@ -13,11 +13,11 @@ class QueryModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         super(ModuleConstants.QueryModuleId, ModuleConstants.QueryFriendlyName, 'query', 'QueryPopup', 'Run real-time text-based queries using a wealth of powerful functions and operators', api);
     }
     getModuleAdaptableObjects() {
-        return this.api.queryApi.getAllNamedQuery();
+        return this.api.queryApi.getNamedQueries();
     }
     getTeamSharingAction() {
         return {
-            ModuleEntities: this.api.queryApi.getAllNamedQuery(),
+            ModuleEntities: this.api.queryApi.getNamedQueries(),
             AddAction: QueryRedux.NamedQueryAdd,
             EditAction: QueryRedux.NamedQueryEdit,
         };
@@ -26,7 +26,7 @@ class QueryModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         return this.api.queryLanguageApi.getColumnsFromExpression(namedQuery.BooleanExpression);
     }
     getReferencedNamedQueryNames(namedQuery) {
-        return this.api.queryApi.getReferencedNamedQueryNames(namedQuery.BooleanExpression);
+        return this.api.queryApi.internalApi.getReferencedNamedQueryNames(namedQuery.BooleanExpression);
     }
     toView(query) {
         return {

package/src/Strategy/ScheduleModule.js

@@ -46,25 +46,23 @@ class ScheduleModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         this.clearAllJobs();
         //add schedules
         this.api.scheduleApi
-            .getAllActiveReminderSchedule()
+            .getActiveReminderSchedules()
             .forEach((reminderSchedule) => {
             this.addSchedule(reminderSchedule, Enums_1.ScheduleType.Reminder);
         });
         // add Reports
-        this.api.scheduleApi.getAllActiveReportSchedule().forEach((reportSchedule) => {
+        this.api.scheduleApi.getActiveReportSchedules().forEach((reportSchedule) => {
             this.addSchedule(reportSchedule, Enums_1.ScheduleType.Report);
         });
         this.api.scheduleApi
-            .getAllActiveIPushPullSchedule()
+            .getActiveIPushPullSchedules()
             .forEach((iPushPullSchedule) => {
             this.addSchedule(iPushPullSchedule, Enums_1.ScheduleType.ipushpull);
         });
-        this.api.scheduleApi.getAllActiveGlue42Schedule().forEach((glue42Schedule) => {
+        this.api.scheduleApi.getActiveGlue42Schedules().forEach((glue42Schedule) => {
             this.addSchedule(glue42Schedule, Enums_1.ScheduleType.Glue42);
         });
-        this.api.scheduleApi
-            .getAllActiveOpenFinSchedule()
-            .forEach((OpenFinSchedule) => {
+        this.api.scheduleApi.getActiveOpenFinSchedules().forEach((OpenFinSchedule) => {
             this.addSchedule(OpenFinSchedule, Enums_1.ScheduleType.OpenFin);
         });
         // }
@@ -127,14 +125,14 @@ class ScheduleModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         const exportAcessLevel = entitlementService.getEntitlementAccessLevelForModule(ModuleConstants.ExportModuleId);
         let allSchedules = [];
         if (accessLevel !== 'Hidden') {
-            allSchedules.push(...this.api.scheduleApi.getAllReminderSchedule(config));
+            allSchedules.push(...this.api.scheduleApi.getReminderSchedules(config));
         }
         if (exportAcessLevel !== 'Hidden') {
-            allSchedules.push(...this.api.scheduleApi.getAllReportSchedule(config));
+            allSchedules.push(...this.api.scheduleApi.getReportSchedules(config));
         }
-        allSchedules.push(...this.api.scheduleApi.getAllIPushPullSchedule(config));
-        allSchedules.push(...this.api.scheduleApi.getAllGlue42Schedule(config));
-        allSchedules.push(...this.api.scheduleApi.getAllOpenFinSchedule(config));
+        allSchedules.push(...this.api.scheduleApi.getIPushPullSchedules(config));
+        allSchedules.push(...this.api.scheduleApi.getGlue42Schedules(config));
+        allSchedules.push(...this.api.scheduleApi.getOpenFinSchedules(config));
         return allSchedules;
     }
     toView(schedule) {

package/src/Strategy/ShortcutModule.js

@@ -19,14 +19,14 @@ class ShortcutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         this.adaptable = api.internalApi.getAdaptableInstance();
     }
     getModuleAdaptableObjects(config) {
-        return this.api.shortcutApi.getAllShortcut(config);
+        return this.api.shortcutApi.getShortcuts(config);
     }
     hasNamedQueryReferences() {
         return false;
     }
     getTeamSharingAction() {
         return {
-            ModuleEntities: this.api.shortcutApi.getAllShortcut(),
+            ModuleEntities: this.api.shortcutApi.getShortcuts(),
             AddAction: ShortcutRedux.ShortcutAdd,
             EditAction: ShortcutRedux.ShortcutEdit,
         };
@@ -38,7 +38,7 @@ class ShortcutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         });
     }
     checkListenToKeyDown() {
-        const shortcuts = this.api.shortcutApi.getAllShortcut();
+        const shortcuts = this.api.shortcutApi.getShortcuts();
         this.shouldHandleKeyDown = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(shortcuts);
     }
     handleKeyDown(cellEditorKeyDownEvent) {
@@ -48,9 +48,9 @@ class ShortcutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         }
         const { keyDownEvent, cellValue, columnId, updateValueCallback } = cellEditorKeyDownEvent;
         const matchingShortcut = this.api.shortcutApi
-            .getAllActiveShortcut()
+            .getActiveShortcuts()
             .find((x) => keyDownEvent.key.toLowerCase() === x.ShortcutKey.toLowerCase() &&
-            this.api.scopeApi.isColumnInScope(this.api.columnApi.getColumnFromId(columnId), x.Scope));
+            this.api.scopeApi.isColumnInScope(this.api.columnApi.getColumnWithColumnId(columnId), x.Scope));
         if (!matchingShortcut || !matchingShortcut.ShortcutValue) {
             return;
         }

package/src/Strategy/SmartEditModule.js

@@ -27,7 +27,7 @@ class SmartEditModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 !menuContext.adaptableColumn.readOnly &&
                 menuContext.isSelectedCell &&
                 menuContext.isSingleSelectedColumn &&
-                this.api.gridApi.areCellsEditable(menuContext.selectedCellInfo.gridCells)) {
+                this.api.gridApi.isEveryCellEditable(menuContext.selectedCellInfo.gridCells)) {
                 let popUpParams = {
                     source: 'ContextMenu',
                 };
@@ -100,7 +100,7 @@ class SmartEditModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             }
         }
         if (ArrayExtensions_1.default.IsNotNullOrEmpty(selectedCellInfo.gridCells) &&
-            !this.api.gridApi.areCellsEditable(selectedCellInfo.gridCells)) {
+            !this.api.gridApi.isEveryCellEditable(selectedCellInfo.gridCells)) {
             return {
                 Alert: {
                     alertType: 'generic',
@@ -118,7 +118,7 @@ class SmartEditModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         let column;
         if (!this.api.internalApi.isGridInPivotMode()) {
             if (ArrayExtensions_1.default.IsNotNullOrEmpty(selectedCellInfo.columns)) {
-                column = this.api.columnApi.getColumnFromId(selectedCellInfo.columns[0].columnId);
+                column = this.api.columnApi.getColumnWithColumnId(selectedCellInfo.columns[0].columnId);
                 if (column) {
                     selectedCellInfo.gridCells.forEach((selectedCell) => {
                         let newValue;

package/src/Strategy/StyledColumnModule.d.ts

@@ -0,0 +1,24 @@
+import { AdaptableModuleBase } from './AdaptableModuleBase';
+import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
+import { AdaptableMenuItem } from '../PredefinedConfig/Common/Menu';
+import { TeamSharingImportInfo } from '../PredefinedConfig/TeamSharingState';
+import { FormatColumn } from '../PredefinedConfig/FormatColumnState';
+import { AdaptableModuleView, AdaptableObjectView, IModule } from './Interface/IModule';
+import { AdaptableApi } from '../Api/AdaptableApi';
+import { AdaptableObject } from '../PredefinedConfig/Common/AdaptableObject';
+import { StyledColumn } from '../PredefinedConfig/StyledColumnState';
+export declare class StyledColumnModule extends AdaptableModuleBase implements IModule {
+    constructor(api: AdaptableApi);
+    updateOldConfig(): void;
+    getModuleAdaptableObjects(config?: {
+        includeLayoutNotAssociatedObjects?: boolean;
+    }): AdaptableObject[];
+    getExplicitlyReferencedColumnIds(formatColumn: FormatColumn): string[];
+    hasNamedQueryReferences(): boolean;
+    addColumnMenuItems(column: AdaptableColumn): AdaptableMenuItem[] | undefined;
+    getTeamSharingAction(): TeamSharingImportInfo<StyledColumn>;
+    toView(styledColumn: StyledColumn): AdaptableObjectView;
+    toViewAll(): AdaptableObjectView[];
+    getViewProperties(): AdaptableModuleView;
+    canBeAssociatedWithLayouts(): boolean;
+}

package/src/Strategy/StyledColumnModule.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnModule = void 0;
+const tslib_1 = require("tslib");
+const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
+const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
+const StyledColumnRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/StyledColumnRedux"));
+const StyledColumnWizard_1 = require("../View/StyledColumn/Wizard/StyledColumnWizard");
+const StyledColumnWizardStyleSection_1 = require("../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../Utilities/ObjectFactory"));
+const LoggingHelper_1 = require("../Utilities/Helpers/LoggingHelper");
+const getObjectTagsViewItems_1 = require("./Utilities/getObjectTagsViewItems");
+class StyledColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
+    constructor(api) {
+        super(ModuleConstants.StyledColumnModuleId, ModuleConstants.StyledColumnFriendlyName, 'brush', 'StyledColumnPopup', // to change
+        'Create a Special Column Style e.g Gradient or Percent Bar', api);
+        /**
+         * Use Case: Data (cell/row) has changed
+         * Action: Any CheckboxColumns need to be updated, as their disabled state may have changed
+         */
+        this.api.internalApi
+            .getDataService()
+            .on('CellDataChanged', (cellDataChangedInfo) => {
+            const activeCheckboxColumnIds = this.api.columnApi
+                .getColumns()
+                .filter((aColumn) => {
+                const checkboxColumn = this.api.styledColumnApi.getCheckBoxStyleStyledColumn(aColumn);
+                return checkboxColumn && !checkboxColumn.IsSuspended;
+            })
+                .map((aColumn) => aColumn.columnId);
+            // no need to refresh the CheckboxColumns if the change was triggered by one of them
+            if (!activeCheckboxColumnIds.includes(cellDataChangedInfo.column.columnId)) {
+                this.api.internalApi
+                    .getAdaptableInstance()
+                    .refreshCells(null, activeCheckboxColumnIds, true, true);
+            }
+        });
+    }
+    updateOldConfig() {
+        const formatColumnsWithColumnStyles = this.api.formatColumnApi
+            .getFormatColumns()
+            .filter((formatColumn) => formatColumn.ColumnStyle);
+        if (!formatColumnsWithColumnStyles.length) {
+            return;
+        }
+        (0, LoggingHelper_1.ConsoleLogInfo)(`Converting ${formatColumnsWithColumnStyles.length} FormatColumns Styles to Styled Columns`, formatColumnsWithColumnStyles);
+        formatColumnsWithColumnStyles.forEach((formatColumn) => {
+            this.api.formatColumnApi.deleteFormatColumn(formatColumn);
+        });
+        const styledColumns = formatColumnsWithColumnStyles
+            .map((formatColumn) => {
+            if (!('ColumnIds' in formatColumn.Scope)) {
+                return null;
+            }
+            return Object.assign(Object.assign(Object.assign({}, ObjectFactory_1.default.CreateEmptyStyledColumn()), { ColumnId: formatColumn.Scope.ColumnIds[0] }), formatColumn.ColumnStyle);
+        })
+            .filter(Boolean);
+        styledColumns.forEach((styledColumn) => this.api.styledColumnApi.addStyledColumn(styledColumn));
+    }
+    getModuleAdaptableObjects(config) {
+        return this.api.styledColumnApi.getStyledColumns(config);
+    }
+    getExplicitlyReferencedColumnIds(formatColumn) {
+        if (this.api.scopeApi.scopeHasColumns(formatColumn.Scope)) {
+            return this.api.scopeApi
+                .getColumnsForScope(formatColumn.Scope)
+                .map((adaptableColumn) => adaptableColumn.columnId);
+        }
+        return [];
+    }
+    hasNamedQueryReferences() {
+        return false;
+    }
+    addColumnMenuItems(column) {
+        let returnColumnMenuItems = [];
+        if (column && this.isModuleEditable() && !column.isSparkline) {
+            if (column.dataType === 'Number') {
+                let styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(column.columnId);
+                let styledColumnExists = Boolean(styledColumn);
+                if (!styledColumn) {
+                    styledColumn = Object.assign(Object.assign({}, ObjectFactory_1.default.CreateEmptyStyledColumn()), { ColumnId: column.columnId, 
+                        // numbers default to gradient
+                        GradientStyle: {} });
+                }
+                if (styledColumn && styledColumn.IsReadOnly && styledColumn.IsReadOnly == true) {
+                    styledColumnExists = false;
+                }
+                let label = styledColumnExists ? 'Edit ' : 'Create ';
+                let popupParam = {
+                    action: styledColumnExists ? 'Edit' : 'New',
+                    source: 'ColumnMenu',
+                    value: styledColumn,
+                };
+                returnColumnMenuItems.push(this.createColumnMenuItemShowPopup(label + 'Styled Column', this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam));
+            }
+            if (column.dataType == 'Boolean' && !this.api.columnApi.isFreeTextColumn(column.columnId)) {
+                let styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(column.columnId);
+                const hasCheckBox = styledColumn && (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.CheckBoxStyle);
+                if (hasCheckBox) {
+                    returnColumnMenuItems.push(this.createColumnMenuItemClickFunction('Remove Checkbox', 'unchecked', () => {
+                        this.api.styledColumnApi.deleteStyledColumn(styledColumn);
+                    }));
+                }
+                else {
+                    returnColumnMenuItems.push(this.createColumnMenuItemClickFunction('Show as Checkbox', 'checked', () => {
+                        const styledColumn = ObjectFactory_1.default.CreateEmptyStyledColumn();
+                        this.api.styledColumnApi.addStyledColumn(Object.assign(Object.assign({}, styledColumn), { ColumnId: column.columnId, CheckBoxStyle: true }));
+                    }));
+                }
+            }
+        }
+        return returnColumnMenuItems;
+    }
+    getTeamSharingAction() {
+        return {
+            ModuleEntities: this.api.styledColumnApi.getStyledColumns(),
+            AddAction: StyledColumnRedux.StyledColumnAdd,
+            EditAction: StyledColumnRedux.StyledColumnEdit,
+        };
+    }
+    toView(styledColumn) {
+        let type = null;
+        if (styledColumn.GradientStyle) {
+            type = 'Gradient';
+        }
+        else if (styledColumn.PercentBarStyle) {
+            type = 'Percent Bar';
+        }
+        else if (styledColumn.CheckBoxStyle) {
+            type = 'Check Box';
+        }
+        else if (styledColumn.SparkLineStyle) {
+            type = 'Spark Line';
+        }
+        return {
+            abObject: styledColumn,
+            items: [
+                {
+                    name: 'Type',
+                    values: [type],
+                },
+                {
+                    name: 'Column',
+                    values: [this.api.columnApi.getFriendlyNameForColumnId(styledColumn.ColumnId)],
+                },
+                !styledColumn.SparkLineStyle && {
+                    name: 'Style',
+                    view: () => {
+                        return (0, StyledColumnWizardStyleSection_1.renderStyledColumnStyleSummary)(styledColumn, this.api);
+                    },
+                },
+                {
+                    name: 'Settings',
+                    values: [`Include grouped rows: ${styledColumn.IncludeGroupedRows ? 'Yes' : 'No'}`],
+                },
+                (0, getObjectTagsViewItems_1.getObjectTagsViewItems)(styledColumn, this.api),
+            ].filter(Boolean),
+        };
+    }
+    toViewAll() {
+        return this.getModuleAdaptableObjects({
+            includeLayoutNotAssociatedObjects: this.showLayoutNotAssociatedObjects(),
+        }).map((styledColumn) => this.toView(styledColumn));
+    }
+    getViewProperties() {
+        return {
+            getDeleteAction: StyledColumnRedux.StyledColumnDelete,
+            getSuspendAction: StyledColumnRedux.StyledColumnSuspend,
+            getUnSuspendAction: StyledColumnRedux.StyledColumnUnSuspend,
+            getEditWizard() {
+                return StyledColumnWizard_1.StyledColumnWizard;
+            },
+        };
+    }
+    canBeAssociatedWithLayouts() {
+        return true;
+    }
+}
+exports.StyledColumnModule = StyledColumnModule;