ROU-4689: Implement a way to preserve the Grid's Layout when editing configs in runtime

src/OSFramework/DataGrid/Configuration/Column/ColumnConfigGroup.ts

@@ -28,6 +28,7 @@ namespace OSFramework.DataGrid.Configuration.Column {
         public uniqueId: string;
         public validateBinding: boolean;
         public visible: boolean;
+        public width: number;
 
         constructor(
             config: DataGrid.Types.IColumnConfigs,

src/OSFramework/DataGrid/Configuration/IConfigurationColumn.ts

@@ -53,6 +53,10 @@ namespace OSFramework.DataGrid.Configuration {
          * Determines whether or not the column is visible
          */
         visible: boolean;
+        /**
+         * Determines whether or not the column is visible
+         */
+        width: number;
         /**
          * Refresh config
          * @param providerConfig The config based on provider, used to update our internal config

src/Providers/DataGrid/Wijmo/Grid/FlexGrid.ts

@@ -8,6 +8,7 @@ namespace Providers.DataGrid.Wijmo.Grid {
         implements IGridWijmo
     {
         private _fBuilder: Feature.FeatureBuilder;
+        private _resizedColumnHandler: OSFramework.DataGrid.Callbacks.Generic;
         private _rowMetadata: RowMetadata;
 
         // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
@@ -84,6 +85,17 @@ namespace Providers.DataGrid.Wijmo.Grid {
             return this.config.getProviderConfig();
         }
 
+        private _updateColumnWidth(
+            grid: wijmo.grid.FlexGrid,
+            event: wijmo.grid.CellRangeEventArgs
+        ): void {
+            const columnProvider = event.getColumn();
+            const columnOS = this.getColumn(columnProvider.binding);
+            if (columnOS) {
+                columnOS.config.width = columnProvider.width;
+            }
+        }
+
         public get autoGenerate(): boolean {
             return this.provider.autoGenerateColumns;
         }
@@ -127,6 +139,9 @@ namespace Providers.DataGrid.Wijmo.Grid {
             this._provider.itemsSource.calculatedFields =
                 this.features.calculatedField.calculatedFields;
 
+            this._resizedColumnHandler = this._updateColumnWidth.bind(this);
+            this._provider.resizedColumn.addHandler(this._resizedColumnHandler);
+
             this._safari14workaround();
 
             this.finishBuild();
@@ -299,6 +314,10 @@ namespace Providers.DataGrid.Wijmo.Grid {
 
             this._fBuilder.dispose();
 
+            this._provider.resizedColumn.removeHandler(
+                this._resizedColumnHandler
+            );
+
             this._provider.dispose();
             this._provider = undefined;
         }