DataGrid - Add warning when trying to set fixed state for child columns (#30800)

dmlvr · web-flow · commit b73e7cb41ef8 · 2025-08-25T10:05:36.000+03:00
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns.ts
@@ -436,3 +436,212 @@ test('DataGrid - Group summary is not updated when a column is fixed on the righ
     },
   ],
 }));
+
+const mockCountries = [
+  {
+    ID: 1,
+    Country: 'Brazil',
+    Area: 8515767,
+    Population_Urban: 0.85,
+    Population_Rural: 0.15,
+    Population_Total: 205809000,
+    GDP_Agriculture: 0.054,
+    GDP_Industry: 0.274,
+    GDP_Services: 0.672,
+    GDP_Total: 2353025,
+  },
+  {
+    ID: 2,
+    Country: 'China',
+    Area: 9388211,
+    Population_Urban: 0.54,
+    Population_Rural: 0.46,
+    Population_Total: 1375530000,
+    GDP_Agriculture: 0.091,
+    GDP_Industry: 0.426,
+    GDP_Services: 0.483,
+    GDP_Total: 10380380,
+  },
+  {
+    ID: 3,
+    Country: 'France',
+    Area: 675417,
+    Population_Urban: 0.79,
+    Population_Rural: 0.21,
+    Population_Total: 64529000,
+    GDP_Agriculture: 0.019,
+    GDP_Industry: 0.183,
+    GDP_Services: 0.798,
+    GDP_Total: 2846889,
+  },
+];
+
+test('Warning should be shown when trying to set fixed state for child columns', async (t) => {
+  const consoleMessages = await t.getBrowserConsoleMessages();
+  const warnings = consoleMessages?.warn.filter((message) => message.startsWith('W1028')) || [];
+  await t.expect(warnings.length).eql(1, 'There is warning W1028');
+}).before(async () => {
+  await createWidget(
+    'dxDataGrid',
+    {
+      dataSource: mockCountries,
+      keyExpr: 'ID',
+      columnAutoWidth: true,
+      allowColumnReordering: true,
+      width: 600,
+      showBorders: true,
+      columnChooser: { enabled: true },
+      columns: [
+        {
+          dataField: 'Country',
+          fixed: true,
+          fixedPosition: 'left',
+        },
+        {
+          dataField: 'Area',
+          fixed: true,
+          fixedPosition: 'left',
+        },
+        {
+          caption: 'Population',
+          columns: [
+            {
+              caption: 'Total',
+              dataField: 'Population_Total',
+              format: 'fixedPoint',
+              fixed: true,
+              fixedPosition: 'left',
+            },
+            {
+              caption: 'Urban',
+              dataField: 'Population_Urban',
+              format: 'percent',
+              fixed: true,
+              fixedPosition: 'left',
+            },
+          ],
+        },
+      ],
+    },
+    '#container',
+  );
+});
+
+test('Warning should work when columns changed in real time', async (t) => {
+  const grid = new DataGrid('#container');
+
+  let consoleMessages = await t.getBrowserConsoleMessages();
+  let warnings = consoleMessages?.warn.filter((message) => message.startsWith('W1028')) || [];
+
+  await t.expect(warnings.length).eql(0, 'There is not any warning W1028');
+
+  await grid.option('columns', [
+    {
+      dataField: 'test3',
+      caption: 'test3',
+    },
+    {
+      caption: 'test3 group',
+      columns: [
+        {
+          dataField: 'test4',
+          caption: 'test4',
+          fixed: true,
+        },
+        {
+          dataField: 'test5',
+          caption: 'test5',
+          fixed: true,
+        },
+      ],
+    },
+  ]);
+  consoleMessages = await t.getBrowserConsoleMessages();
+  warnings = consoleMessages?.warn.filter((message) => message.startsWith('W1028')) || [];
+  await t.expect(warnings.length).eql(1, 'There is warning W1028');
+}).before(async () => {
+  await createWidget(
+    'dxDataGrid',
+    {
+      dataSource: [],
+    },
+    '#container',
+  );
+});
+
+test('Warning should be shown one time for every dataGrid instance', async (t) => {
+  const otherGrid = new DataGrid('#otherContainer');
+
+  await otherGrid.apiAddColumn({
+    dataField: 'test',
+    caption: 'test',
+    columns: [
+      {
+        dataField: 'test1',
+        caption: 'test1',
+        fixed: true,
+      },
+      {
+        dataField: 'test2',
+        caption: 'test2',
+        fixed: true,
+      },
+    ],
+  });
+  const consoleMessages = await t.getBrowserConsoleMessages();
+  const warnings = consoleMessages?.warn.filter((message) => message.startsWith('W1028')) || [];
+  await t.expect(warnings.length).eql(2, 'There are two warnings W1028');
+}).before(async () => {
+  await createWidget(
+    'dxDataGrid',
+    {
+      dataSource: mockCountries,
+      keyExpr: 'ID',
+      columnAutoWidth: true,
+      allowColumnReordering: true,
+      width: 600,
+      showBorders: true,
+      columnChooser: { enabled: true },
+      columns: [
+        {
+          dataField: 'Country',
+          fixed: true,
+          fixedPosition: 'left',
+        },
+        {
+          dataField: 'Area',
+          fixed: true,
+          fixedPosition: 'left',
+        },
+        {
+          caption: 'Population',
+          columns: [
+            {
+              caption: 'Total',
+              dataField: 'Population_Total',
+              format: 'fixedPoint',
+              fixed: true,
+              fixedPosition: 'left',
+            },
+            {
+              caption: 'Urban',
+              dataField: 'Population_Urban',
+              format: 'percent',
+              fixed: true,
+              fixedPosition: 'left',
+            },
+          ],
+        },
+      ],
+    },
+    '#container',
+  );
+
+  await createWidget(
+    'dxDataGrid',
+    {
+      dataSource: [],
+    },
+    '#otherContainer',
+  );
+});
diff --git a/packages/devextreme/js/__internal/grids/grid_core/columns_controller/const.ts b/packages/devextreme/js/__internal/grids/grid_core/columns_controller/const.ts
@@ -27,3 +27,10 @@ export const COLUMN_INDEX_OPTIONS = {
 };
 export const GROUP_LOCATION = 'group';
 export const COLUMN_CHOOSER_LOCATION = 'columnChooser';
+
+export const UNSUPPORTED_PROPERTIES_FOR_CHILD_COLUMNS = [
+  'fixed',
+  'fixedPosition',
+  'type',
+  'buttons',
+];
diff --git a/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts
@@ -136,6 +136,8 @@ export class ColumnsController extends modules.Controller {
 
   protected _stateStoringController!: StateStoringController;
 
+  public _isWarnedAboutUnsupportedProperties?: boolean;
+
   public init(isApplyingUserState?): void {
     this._dataController = this.getController('data');
     this._focusController = this.getController('focus');
diff --git a/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller_utils.ts b/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller_utils.ts
@@ -12,6 +12,7 @@ import {
   isDefined, isFunction, isNumeric, isObject, isString, type,
 } from '@js/core/utils/type';
 import variableWrapper from '@js/core/utils/variable_wrapper';
+import errors from '@js/ui/widget/ui.errors';
 
 import { HIDDEN_COLUMNS_WIDTH } from '../adaptivity/const';
 import gridCoreUtils from '../m_utils';
@@ -24,11 +25,36 @@ import {
   GROUP_COMMAND_COLUMN_NAME,
   GROUP_LOCATION,
   IGNORE_COLUMN_OPTION_NAMES,
+  UNSUPPORTED_PROPERTIES_FOR_CHILD_COLUMNS,
   USER_STATE_FIELD_NAMES,
   USER_STATE_FIELD_NAMES_15_1,
 } from './const';
 import type { ColumnsController } from './m_columns_controller';
 
+const warnFixedInChildColumnsOnce = (controller: ColumnsController, childColumns: any[]): void => {
+  if (controller?._isWarnedAboutUnsupportedProperties) return;
+  if (!childColumns || !Array.isArray(childColumns) || childColumns?.length === 0) return;
+
+  let unsupportedProperty: string | null = null;
+
+  for (const column of childColumns) {
+    if (unsupportedProperty) break;
+    if (!column || typeof column !== 'object' || column === null) continue;
+
+    for (const property of UNSUPPORTED_PROPERTIES_FOR_CHILD_COLUMNS) {
+      if (property in column) {
+        unsupportedProperty = property;
+        break;
+      }
+    }
+  }
+
+  if (unsupportedProperty) {
+    controller && (controller._isWarnedAboutUnsupportedProperties = true);
+    errors.log('W1028', unsupportedProperty);
+  }
+};
+
 export const setFilterOperationsAsDefaultValues = function (column) {
   column.filterOperations = column.defaultFilterOperations;
 };
@@ -47,7 +73,7 @@ export const createColumn = function (that: ColumnsController, columnOptions, us
 
     that.setName(columnOptions);
 
-    let result = { };
+    let result = {};
     if (columnOptions.command) {
       result = deepExtendArraySafe(commonColumnOptions, columnOptions);
     } else {
@@ -90,6 +116,7 @@ export const createColumnsFromOptions = function (that: ColumnsController, colum
         result.push(column);
 
         if (column.columns) {
+          warnFixedInChildColumnsOnce(that, column.columns);
           result = result.concat(createColumnsFromOptions(that, column.columns, column, result.length));
           delete column.columns;
           column.hasColumns = true;
@@ -945,7 +972,7 @@ const isFirstOrLastBandColumn = function (
   fixedPosition?: StickyPosition,
 ): boolean {
   return bandColumns.every((column, index) => onlyWithinBandColumn && index === 0
-        || isFirstOrLastColumnCore(that, column, index, onlyWithinBandColumn, isLast, fixedPosition));
+    || isFirstOrLastColumnCore(that, column, index, onlyWithinBandColumn, isLast, fixedPosition));
 };
 
 const isFirstOrLastColumnCore = function (
diff --git a/packages/devextreme/js/ui/widget/ui.errors.js b/packages/devextreme/js/ui/widget/ui.errors.js
@@ -368,4 +368,8 @@ export default errorUtils(errors.ERROR_MESSAGES, {
      * @name ErrorsUIWidgets.W1027
      */
     W1027: 'A prompt should be specified for a custom command.',
+    /**
+     * @name ErrorsUIWidgets.W1028
+     */
+    W1028: 'Nested/banded columns do not support the following properties: {0}.',
 });
diff --git a/packages/testcafe-models/dataGrid/index.ts b/packages/testcafe-models/dataGrid/index.ts
@@ -218,7 +218,7 @@ export default class DataGrid extends GridCore {
 
   getFilterEditor<T>(
     columnIndex: number,
-    EditorType: new(mainElement: Selector) => T,
+    EditorType: new (mainElement: Selector) => T,
   ): T {
     return new EditorType(this.getHeaders().getFilterRow().getFilterCell(columnIndex).getEditor());
   }
@@ -592,7 +592,7 @@ export default class DataGrid extends GridCore {
     const { getInstance } = this;
     return ClientFunction(
       () => {
-        (getInstance() as DataGridInstance).refresh().catch(() => {});
+        (getInstance() as DataGridInstance).refresh().catch(() => { });
       },
       { dependencies: { getInstance } },
     )();
@@ -651,6 +651,15 @@ export default class DataGrid extends GridCore {
     )();
   }
 
+  apiAddColumn(config: any): Promise<void> {
+    const { getInstance } = this;
+
+    return ClientFunction(
+      () => (getInstance() as DataGridInstance).addColumn(config),
+      { dependencies: { getInstance, config } },
+    )();
+  }
+
   moveRow(rowIndex: number, x: number, y: number, isStart = false): Promise<void> {
     const { getInstance } = this;
 
@@ -672,7 +681,7 @@ export default class DataGrid extends GridCore {
     )();
   }
 
-  resizeHeader(columnIndex: number, offset: number, needToTriggerPointerUp = true): Promise<void>  {
+  resizeHeader(columnIndex: number, offset: number, needToTriggerPointerUp = true): Promise<void> {
     const { getInstance } = this;
 
     return ClientFunction(
@@ -852,10 +861,10 @@ export default class DataGrid extends GridCore {
   ): Promise<void> {
     const { getInstance } = this;
     return ClientFunction(
-        () => {
-          (getInstance() as DataGridInstance).option('selection.sensitivity', sensitivity);
-        },
-        { dependencies: { getInstance, sensitivity } },
+      () => {
+        (getInstance() as DataGridInstance).option('selection.sensitivity', sensitivity);
+      },
+      { dependencies: { getInstance, sensitivity } },
     )();
   }
 }
