DataGrid - Fix column width changes not being applied immediately (Option 2)

packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts

@@ -1508,10 +1508,26 @@ export class ColumnsController extends modules.Controller {
         });
       }
 
-      fireColumnsChanged(that);
+      // Can we simply write:
+      //
+      // fireColumnsChanged(that, { needToResize: !notFireEvent && this.needToResize(option) });
+      //
+      // But the QUnit tests that check the structure of the columnsChanged callback
+      // argument will fail because a new needToResize property will be added.
+      // We’ll just need to update the expected structure in those tests.
+      fireColumnsChanged(that, !notFireEvent && this.needToResize(option) ? { needToResize: true } : undefined);
     }
   }
 
+  private needToResize(option: string | Record<string, unknown>): boolean {
+    const isWidthChanging = isObject(option)
+      ? 'width' in option
+      : option === 'width';
+    const isUpdateAllowed = !this._updateLockCount && !this.component._updateLockCount;
+
+    return isWidthChanging && isUpdateAllowed;
+  }
+
   private clearSorting() {
     const that = this;
     const columnCount = this.columnCount();

packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller_utils.ts

@@ -656,7 +656,10 @@ export const updateColumnChanges = (
   resetColumnsCache(that);
 };
 
-export const fireColumnsChanged = function (that: ColumnsController) {
+export const fireColumnsChanged = function (
+  that: ColumnsController,
+  options?: { needToResize?: boolean },
+): void {
   const onColumnsChanging: any = that.option('onColumnsChanging');
   const columnChanges = that._columnChanges;
   const reinitOptionNames = ['dataField', 'lookup', 'dataType', 'columns'];
@@ -674,7 +677,10 @@ export const fireColumnsChanged = function (that: ColumnsController) {
       that.reinit();
       that._reinitAfterLookupChanges = undefined;
     } else {
-      that.columnsChanged.fire(columnChanges);
+      that.columnsChanged.fire({
+        ...columnChanges,
+        ...options,
+      });
     }
   }
 };

packages/devextreme/js/__internal/grids/grid_core/columns_controller/types.ts

@@ -56,4 +56,5 @@ export interface ColumnsChanges {
   };
   columnIndex?: number;
   columnIndices?: number[];
+  needToResize?: boolean;
 }

packages/devextreme/js/__internal/grids/grid_core/views/m_grid_view.ts

@@ -21,6 +21,7 @@ import type { FooterView } from '../../data_grid/summary/m_summary';
 import type { AdaptiveColumnsController } from '../adaptivity/m_adaptivity';
 import type { ColumnHeadersView } from '../column_headers/m_column_headers';
 import type { ColumnsController } from '../columns_controller/m_columns_controller';
+import type { ColumnsChanges } from '../columns_controller/types';
 import type { DataController } from '../data_controller/data_controller';
 import type { DataChange } from '../data_controller/types';
 import modules from '../m_modules';
@@ -119,6 +120,8 @@ export class ResizingController extends modules.ViewController {
 
   private _editorFactoryController!: EditorFactory;
 
+  private columnsChangedHandler!: (e: ColumnsChanges) => void;
+
   protected _updateScrollableTimeoutID: any;
 
   public resizeCompleted!: Callback;
@@ -137,6 +140,19 @@ export class ResizingController extends modules.ViewController {
     this._footerView = this.getView('footerView');
     this._rowsView = this.getView('rowsView');
     this._gridView = this.getView('gridView');
+
+    if (!this.columnsChangedHandler) {
+      this.columnsChangedHandler = (): void => {
+        this._columnsController.columnsChanged.remove(this.columnsChangedHandler);
+        this.resize();
+      };
+
+      this._columnsController.columnsChanged.add((e: ColumnsChanges) => {
+        if (e.needToResize) {
+          this._columnsController.columnsChanged.add(this.columnsChangedHandler);
+        }
+      });
+    }
   }
 
   private _initPostRenderHandlers() {

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnsController.tests.js

@@ -5499,7 +5499,8 @@ QUnit.module('Column Option', { beforeEach: setupModule, afterEach: teardownModu
         assert.deepEqual(lastArgs, {
             changeTypes: { columns: true, length: 1 },
             columnIndex: 1,
-            optionNames: { width: true, length: 1 }
+            optionNames: { width: true, length: 1 },
+            needToResize: true,
         });
     });
 

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/stateStoring.tests.js

@@ -1119,10 +1119,14 @@ QUnit.module('State Storing with real controllers', {
 
     // T308264
     QUnit.test('Not save user state when the visibleWidth option in column changed', function(assert) {
-    // arrange, act
+        // arrange, act
         let userState;
         let customSaveCallCount = 0;
 
+        this.$element = function() {
+            return $('#container');
+        };
+
         this.setupDataGridModules({
             sorting: { mode: 'single' },
             stateStoring: {
@@ -1143,6 +1147,10 @@ QUnit.module('State Storing with real controllers', {
             }
         });
 
+        this.gridView.render(this.$element());
+        this.gridView.update();
+        this.clock.tick(200);
+
         // assert
         assert.strictEqual(customSaveCallCount, 1, 'customSave call count');