DataGrid: Implementing reordering of grouped columns using keyboard navigation (DevExpress#29628)

Co-authored-by: Alyar <>

Author: Alyar666

apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx

@@ -53,7 +53,6 @@ const columnOptions = {
             dataField: 'Country',
             fixed: true,
         },
-        'Country',
         'Area',
         'Population_Urban',
         'Population_Rural',
@@ -118,6 +117,24 @@ const columnOptions = {
             }],
         }],
     }],
+    groupColumns: [
+        'ID',
+        {
+            dataField: 'Country',
+            groupIndex: 0,
+        },
+        {
+            dataField: 'Area',
+            groupIndex: 1,
+        },
+        'Population_Urban',
+        'Population_Rural',
+        'Population_Total',
+        'GDP_Agriculture',
+        'GDP_Industry',
+        'GDP_Services',
+        'GDP_Total',
+    ],
 };
 
 const meta: Meta<typeof DataGrid> = {
@@ -227,5 +244,8 @@ export const ColumnReordering: Story = {
         columnFixing: {
             enabled: false
         },
+        groupPanel: {
+            visible: true,
+        },
     }
   }

e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/columnReordering.visual.ts

@@ -139,6 +139,38 @@ test('The column should not be reordered when it has allowReordering set to fals
   });
 });
 
+test('The column should not be reordered when allowColumnReordering is false and group panel is visible', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const firstHeaderCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0);
+
+  await t
+    .click(firstHeaderCell.element)
+    .pressKey('ctrl+right');
+
+  await takeScreenshot(
+    'reorder_column_when_allowColumnReordering_is_false_and_group_panel_is_visible',
+    dataGrid.element,
+  );
+
+  await t.expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    allowColumnReordering: false,
+    groupPanel: {
+      visible: true,
+      allowColumnDragging: true,
+    },
+    dataSource: [{
+      field1: 'test1',
+      field2: 'test2',
+      field3: 'test3',
+      field4: 'test4',
+    }],
+  });
+});
+
 // Fixed columns
 test('reorder fixed left column to right', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
@@ -386,6 +418,118 @@ test('reorder sticky column to right when there are fixed columns', async (t) =>
   });
 });
 
+test('reorder fixed right column to right when there is a command column on the right', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const firstFixedRightHeader = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(6);
+
+  await t
+    .click(firstFixedRightHeader.element)
+    .pressKey('ctrl+right')
+    .pressKey('ctrl+right');
+
+  await takeScreenshot(
+    'reorder_fixed_right_column_to_right_when_there_is_command_column_on_right',
+    dataGrid.element,
+  );
+
+  await t.expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    columnWidth: 100,
+    allowColumnReordering: true,
+    editing: {
+      mode: 'row',
+      allowUpdating: true,
+    },
+    dataSource: [{
+      field1: 'test1',
+      field2: 'test2',
+      field3: 'test3',
+      field4: 'test4',
+      field5: 'test5',
+      field6: 'test6',
+      field7: 'test7',
+      field8: 'test8',
+    }],
+    customizeColumns: (columns) => {
+      columns[0].fixed = true;
+      columns[0].fixedPosition = 'right';
+      columns[7].fixed = true;
+      columns[7].fixedPosition = 'right';
+    },
+  });
+});
+
+test('reorder fixed right column to right when there is a custom command column on the right', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const firstFixedRightHeader = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(6);
+
+  await t
+    .click(firstFixedRightHeader.element)
+    .pressKey('ctrl+right')
+    .pressKey('ctrl+right')
+    .pressKey('ctrl+right');
+
+  await takeScreenshot(
+    'reorder_fixed_right_column_to_right_when_there_is_custom_command_column_on_right',
+    dataGrid.element,
+  );
+
+  await t.expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    columnWidth: 100,
+    allowColumnReordering: true,
+    editing: {
+      mode: 'row',
+      allowUpdating: true,
+    },
+    dataSource: [{
+      field1: 'test1',
+      field2: 'test2',
+      field3: 'test3',
+      field4: 'test4',
+      field5: 'test5',
+      field6: 'test6',
+      field7: 'test7',
+      field8: 'test8',
+    }],
+    columns: [
+      {
+        dataField: 'field1',
+        fixed: true,
+        fixedPosition: 'right',
+      },
+      'field2',
+      'field3',
+      'field4',
+      'field5',
+      'field6',
+      'field7',
+      {
+        dataField: 'field8',
+        fixed: true,
+        fixedPosition: 'right',
+      },
+      {
+        type: 'buttons',
+        fixed: true,
+        fixedPosition: 'right',
+      },
+    ],
+    customizeColumns: (columns) => {
+      columns[0].fixed = true;
+      columns[0].fixedPosition = 'right';
+      columns[7].fixed = true;
+      columns[7].fixedPosition = 'right';
+    },
+  });
+});
+
 // Band columns
 test('reorder band column to right', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);