DataGrid/TreeList: add the columnFixing.legacyMode option (#27809)

Co-authored-by: Alyar <>
DevExpress · Jul 23, 2024 · c248a78 · c248a78
1 parent b9d8290
commit c248a78
Show file tree

Hide file tree

Showing 37 changed files with 403 additions and 55 deletions.
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/accessibility/common.ts b/e2e/testcafe-devextreme/tests/dataGrid/accessibility/common.ts
@@ -599,6 +599,10 @@ const DATA_GRID_SELECTOR = '#container';
     return createWidget('dxDataGrid', {
       dataSource: getData(10, 7),
       keyExpr: 'field_0',
+      columnFixing: {
+        // @ts-expect-error private option
+        legacyMode: true,
+      },
       columns: [
         {
           dataField: 'field_0',
@@ -1440,6 +1444,8 @@ const DATA_GRID_SELECTOR = '#container';
       keyExpr: 'field_0',
       columnFixing: {
         enabled: true,
+        // @ts-expect-error private option
+        legacyMode: true,
       },
       sorting: {
         mode: 'multiple',

diff --git a/e2e/testcafe-devextreme/tests/dataGrid/accessibility/fixedColumns.ts b/e2e/testcafe-devextreme/tests/dataGrid/accessibility/fixedColumns.ts
@@ -29,6 +29,10 @@ const getGridConfig = (needFixedColumnOnLeft = true): Properties => ({
       id: 1, column1: 'a', column2: 'a', column3: 'a', column4: 'a', column5: 'a', column6: 'a', column7: 'a', column8: 'a',
     },
   ],
+  columnFixing: {
+    // @ts-expect-error private option
+    legacyMode: true,
+  },
   columns: [
     { dataField: 'column1', fixed: needFixedColumnOnLeft },
     { dataField: 'column2', fixed: needFixedColumnOnLeft },

diff --git a/e2e/testcafe-devextreme/tests/dataGrid/columnReordering.ts b/e2e/testcafe-devextreme/tests/dataGrid/columnReordering.ts
@@ -44,6 +44,10 @@ test('The column reordering should work correctly when there is a fixed column w
       field1: 'test1', field2: 'test2', field3: 'test3', field4: 'test4',
     },
   ],
+  columnFixing: {
+    // @ts-expect-error private option
+    legacyMode: true,
+  },
   columns: [
     {
       dataField: 'field1',

diff --git a/e2e/testcafe-devextreme/tests/dataGrid/filterRow/T1163100_changeFIlterIcon.ts b/e2e/testcafe-devextreme/tests/dataGrid/filterRow/T1163100_changeFIlterIcon.ts
@@ -53,6 +53,10 @@ const generateTestData = (rowCount: number) => new Array(rowCount)
         filterRow: {
           visible: true,
         },
+        columnFixing: {
+          // @ts-expect-error private option
+          legacyMode: true,
+        },
         columns: [
           ...firstColumns,
           ...secondColumns,

diff --git a/e2e/testcafe-devextreme/tests/dataGrid/fixedColumns.ts b/e2e/testcafe-devextreme/tests/dataGrid/fixedColumns.ts
@@ -59,6 +59,10 @@ test('Fixed columns should have same width as not fixed columns with columnAutoW
     },
     columnAutoWidth: true,
     scrolling: { mode: 'standard', useNative: true },
+    columnFixing: {
+      // @ts-expect-error private option
+      legacyMode: true,
+    },
     columns: [
       {
         dataField: 'dataA',
@@ -174,12 +178,15 @@ test('Hovering over a row should work correctly when there is a fixed column and
     keyExpr: 'id',
     renderAsync: false,
     hoverStateEnabled: true,
-    // @ts-expect-error private option
     templatesRenderAsynchronously: true,
     columns: [
       { dataField: 'id', fixed: true },
       { dataField: 'text', cellTemplate: '#test' },
     ],
+    columnFixing: {
+      // @ts-expect-error private option
+      legacyMode: true,
+    },
     showBorders: true,
   });
 
@@ -235,6 +242,10 @@ safeSizeTest('Fixed to the right columns should appear when any column has undef
     Column7: 'f',
     Column8: 'g',
   }],
+  columnFixing: {
+    // @ts-expect-error private option
+    legacyMode: true,
+  },
   columns: [
     {
       dataField: 'Column1', fixed: true, fixedPosition: 'right', width: 100,
@@ -298,7 +309,6 @@ test('Hovering over a row should work correctly after scrolling when there is a
     keyExpr: 'id',
     renderAsync: false,
     hoverStateEnabled: true,
-    // @ts-expect-error private option
     templatesRenderAsynchronously: true,
     columns: [
       'id',
@@ -309,6 +319,10 @@ test('Hovering over a row should work correctly after scrolling when there is a
       },
       'text2',
     ],
+    columnFixing: {
+      // @ts-expect-error private option
+      legacyMode: true,
+    },
     paging: {
       enabled: false,
     },
@@ -345,6 +359,10 @@ safeSizeTest('The grid layout should be correct after resizing the window when t
 }, [800, 800]).before(async () => createWidget('dxDataGrid', {
   columnAutoWidth: true,
   dataSource: [{}],
+  columnFixing: {
+    // @ts-expect-error private option
+    legacyMode: true,
+  },
   columns: [{
     caption: 'Fixed column',
     fixed: true,
@@ -378,7 +396,11 @@ test('DataGrid - Group summary is not updated when a column is fixed on the righ
   ],
   keyExpr: 'id',
   repaintChangesOnly: true,
-  columnFixing: { enabled: true },
+  columnFixing: {
+    enabled: true,
+    // @ts-expect-error private option
+    legacyMode: true,
+  },
   groupPanel: {
     visible: true,
   },

diff --git a/e2e/testcafe-devextreme/tests/dataGrid/grouping/grouping.ts b/e2e/testcafe-devextreme/tests/dataGrid/grouping/grouping.ts
@@ -206,8 +206,11 @@ test('Headers should be rendered correctly after changing the grouping.autoExpan
     ],
     width: 700,
     renderAsync: false,
-    // @ts-expect-error private option
     templatesRenderAsynchronously: true,
+    columnFixing: {
+      // @ts-expect-error private option
+      legacyMode: true,
+    },
     columns: [
       { dataField: 'field1', headerCellTemplate: (_, { column }) => $('<div>').text(column.caption as string) },
       { dataField: 'field2', groupIndex: 0 },

diff --git a/e2e/testcafe-devextreme/tests/dataGrid/keyboardNavigation/keyboardNavigation.functional.ts b/e2e/testcafe-devextreme/tests/dataGrid/keyboardNavigation/keyboardNavigation.functional.ts
@@ -1914,6 +1914,10 @@ test('Moving by Tab key if scrolling.columnRenderingMode: virtual and fixed colu
       mode: 'multiple',
       showCheckBoxesMode: 'always',
     },
+    columnFixing: {
+      // @ts-expect-error private option
+      legacyMode: true,
+    },
     customizeColumns(columns) {
       columns[0].fixed = true;
       columns[1].fixed = true;
@@ -2005,6 +2009,10 @@ test('Moving by Tab key if scrolling.columnRenderingMode: virtual and fixed colu
       mode: 'multiple',
       showCheckBoxesMode: 'always',
     },
+    columnFixing: {
+      // @ts-expect-error private option
+      legacyMode: true,
+    },
     customizeColumns(columns) {
       columns[0].fixedPosition = 'right';
       columns[0].fixed = true;
@@ -2221,6 +2229,10 @@ test('Empty row should lose focus on Tab (T941246)', async (t) => {
         { name: 'Ben', c0: 'c0_1' },
       ],
       keyExpr: 'name',
+      columnFixing: {
+        // @ts-expect-error private option
+        legacyMode: true,
+      },
       columns: [{ type: 'buttons', fixed: isCommandColumnFixed, fixedPosition: 'left' }, 'name', 'c0'],
       editing: {
         mode: 'row',
@@ -2297,6 +2309,10 @@ test('Empty row should lose focus on Tab (T941246)', async (t) => {
         { name: 'Ben', c0: 'c0_1' },
       ],
       keyExpr: 'name',
+      columnFixing: {
+        // @ts-expect-error private option
+        legacyMode: true,
+      },
       columns: [{ type: 'buttons', fixed: isCommandColumnFixed, fixedPosition: 'left' }, 'name', 'c0'],
       editing: {
         mode: 'row',
@@ -2378,6 +2394,10 @@ test('Empty row should lose focus on Tab (T941246)', async (t) => {
         { name: 'Ben', c0: 'c0_1' },
       ],
       keyExpr: 'name',
+      columnFixing: {
+        // @ts-expect-error private option
+        legacyMode: true,
+      },
       columns: ['name', 'c0', { type: 'buttons', fixed: isCommandColumnFixed, fixedPosition: 'right' }],
       editing: {
         mode: 'row',
@@ -2442,6 +2462,10 @@ test('Empty row should lose focus on Tab (T941246)', async (t) => {
         { name: 'Ben', c0: 'c0_1' },
       ],
       keyExpr: 'name',
+      columnFixing: {
+        // @ts-expect-error private option
+        legacyMode: true,
+      },
       columns: ['name', 'c0', { type: 'buttons', fixed: isCommandColumnFixed, fixedPosition: 'right' }],
       editing: {
         mode: 'row',
@@ -2523,6 +2547,10 @@ test('Empty row should lose focus on Tab (T941246)', async (t) => {
         { name: 'Ben', c0: 'c0_1' },
       ],
       keyExpr: 'name',
+      columnFixing: {
+        // @ts-expect-error private option
+        legacyMode: true,
+      },
       columns: ['name', 'c0', { type: 'buttons', fixed: isCommandColumnFixed, fixedPosition: 'right' }],
       editing: {
         mode: 'row',
@@ -3540,6 +3568,10 @@ test('The last cell should be focused after changing the page size when scrollin
     keyExpr: 'id',
     width: 450,
     columnWidth: 150,
+    columnFixing: {
+      // @ts-expect-error private option
+      legacyMode: true,
+    },
     customizeColumns(columns) {
       columns[0].fixed = true;
       columns[6].fixed = true;

diff --git a/...estcafe-devextreme/tests/dataGrid/markup/group-panel/T1163515_alternateRowGroupBorders.ts b/...estcafe-devextreme/tests/dataGrid/markup/group-panel/T1163515_alternateRowGroupBorders.ts
@@ -100,6 +100,10 @@ const createDataGrid = async ({
         count: 7,
       },
     ],
+    columnFixing: {
+      // @ts-expect-error private option
+      legacyMode: true,
+    },
     columns: [
       {
         dataField: 'group',

diff --git a/e2e/testcafe-devextreme/tests/dataGrid/masterDetail.ts b/e2e/testcafe-devextreme/tests/dataGrid/masterDetail.ts
@@ -207,10 +207,11 @@ safeSizeTest('The master detail row should display correctly when renderAsync, v
         showBorders: true,
         height: 800,
         renderAsync: true,
-        // @ts-expect-error private option
         templatesRenderAsynchronously: true,
         columnFixing: {
           enabled: true,
+          // @ts-expect-error private option
+          legacyMode: true,
         },
         masterDetail: {
           enabled: true,

diff --git a/e2e/testcafe-devextreme/tests/dataGrid/rowDragging.ts b/e2e/testcafe-devextreme/tests/dataGrid/rowDragging.ts
@@ -207,6 +207,10 @@ safeSizeTest('The cross-component drag and drop rows should work when there are
           id: 8, name: 'Name 8', age: 14,
         },
       ],
+      columnFixing: {
+        // @ts-expect-error private option
+        legacyMode: true,
+      },
       columns: [{ dataField: 'id', fixed: true }, 'name', 'age'],
       rowDragging: {
         group: 'shared',
@@ -240,6 +244,10 @@ safeSizeTest('The cross-component drag and drop rows should work when there are
           id: 8, name: 'Name 8', age: 14,
         },
       ],
+      columnFixing: {
+        // @ts-expect-error private option
+        legacyMode: true,
+      },
       columns: [{ dataField: 'id', fixed: true }, 'name', 'age'],
       rowDragging: {
         group: 'shared',
@@ -304,6 +312,10 @@ safeSizeTest('The cross-component drag and drop rows should not block rows', asy
           id: 8, name: 'Name 8', age: 14,
         },
       ],
+      columnFixing: {
+        // @ts-expect-error private option
+        legacyMode: true,
+      },
       columns: [{ dataField: 'id', fixed: true }, 'name', 'age'],
       rowDragging: {
         group: 'shared',
@@ -337,6 +349,10 @@ safeSizeTest('The cross-component drag and drop rows should not block rows', asy
           id: 8, name: 'Name 8', age: 15,
         },
       ],
+      columnFixing: {
+        // @ts-expect-error private option
+        legacyMode: true,
+      },
       columns: [{ dataField: 'id', fixed: true }, 'name', 'age'],
       rowDragging: {
         group: 'shared',

diff --git a/e2e/testcafe-devextreme/tests/dataGrid/scrolling.ts b/e2e/testcafe-devextreme/tests/dataGrid/scrolling.ts
@@ -130,6 +130,10 @@ safeSizeTest('DataGrid should not reset its left scroll position on window resiz
   scrolling: {
     columnRenderingMode: 'virtual',
   },
+  columnFixing: {
+    // @ts-expect-error private option
+    legacyMode: true,
+  },
   customizeColumns(columns) {
     columns[0].fixed = true;
     columns[1].fixed = true;
@@ -173,6 +177,10 @@ safeSizeTest('DataGrid should not reset its right scroll position on window resi
   scrolling: {
     columnRenderingMode: 'virtual',
   },
+  columnFixing: {
+    // @ts-expect-error private option
+    legacyMode: true,
+  },
   customizeColumns(columns) {
     columns[0].fixedPosition = 'right';
     columns[0].fixed = true;
@@ -1045,6 +1053,8 @@ safeSizeTest('The scroll position of a fixed table should be synchronized with t
   },
   columnFixing: {
     enabled: true,
+    // @ts-expect-error private option
+    legacyMode: true,
   },
   columns: [{
     type: 'buttons',
@@ -1446,6 +1456,10 @@ test.meta({ unstable: true })('New virtual mode. Navigation to the last row if n
 //       width: 800,
 //       renderAsync: false,
 //       templatesRenderAsynchronously: true,
+//       columnFixing: {
+//          // @ts-expect-error private option
+//          legacyMode: true,
+//       },
 //       customizeColumns(columns) {
 //         columns[0].width = 70;
 //         columns[0].fixed = true;

diff --git a/e2e/testcafe-devextreme/tests/dataGrid/validation/validationPopup.ts b/e2e/testcafe-devextreme/tests/dataGrid/validation/validationPopup.ts
@@ -120,6 +120,10 @@ safeSizeTest('Validation popup with open master detail and fixed columns', async
   dataSource: getData(20, 2),
   height: 400,
   showBorders: true,
+  columnFixing: {
+    // @ts-expect-error private option
+    legacyMode: true,
+  },
   columns: [{
     dataField: 'field_0',
     validationRules: [{ type: 'required' }],

diff --git a/e2e/testcafe-devextreme/tests/dataGrid/virtualColumns.ts b/e2e/testcafe-devextreme/tests/dataGrid/virtualColumns.ts
@@ -183,6 +183,10 @@ safeSizeTest('The updateDimensions method should render the grid if a container
       mode: 'virtual',
       useNative,
     },
+    columnFixing: {
+      // @ts-expect-error private option
+      legacyMode: true,
+    },
     customizeColumns(columns) {
       columns[0].fixed = true;
     },
@@ -236,6 +240,10 @@ test('The markup should be correct after horizontal scrolling and collapse of th
     mode: 'virtual',
     columnRenderingMode: 'virtual',
   },
+  columnFixing: {
+    // @ts-expect-error private option
+    legacyMode: true,
+  },
   customizeColumns(columns) {
     columns[0].fixed = true;
   },
@@ -334,6 +342,8 @@ test('Group row should have right colspan with summary, virtual columns and fixe
     columns,
     columnFixing: {
       enabled: true,
+      // @ts-expect-error private option
+      legacyMode: true,
     },
     columnMinWidth: 100,
     scrolling: {

diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/integration.ts b/e2e/testcafe-devextreme/tests/navigation/scrollable/integration.ts
@@ -34,6 +34,10 @@ fixture.disablePageReloads`Integration_DataGrid`
         useNative,
       },
       width: 300,
+      columnFixing: {
+        // @ts-expect-error private option
+        legacyMode: true,
+      },
       columns: [
         { dataField: 'field1', fixed: true },
         { dataField: 'field2' },