TreeList/DataGrid - Columns move to the adaptive row if row dragging (cherry-pick) (#31483)

Author: dmlvr

e2e/testcafe-devextreme/tests/dataGrid/common/adaptiveRow.ts

@@ -0,0 +1,57 @@
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+import { safeSizeTest } from '../../../helpers/safeSizeTest';
+
+fixture.disablePageReloads`Adaptive Row`
+  .page(url(__dirname, '../../container.html'));
+
+safeSizeTest('Should be shown and hidden when the window is resized', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  await dataGrid.isReady();
+
+  const adaptiveButton = dataGrid.getAdaptiveButton();
+  await t.expect(adaptiveButton.exists).ok();
+  await t.click(adaptiveButton);
+
+  await t.expect(dataGrid.getAdaptiveRow(0).element.exists).ok();
+
+  await t.resizeWindow(1200, 400);
+
+  await t.expect(dataGrid.isAdaptiveColumnHidden()).ok();
+  await t.expect(dataGrid.getAdaptiveRow(0).element.exists).notOk();
+}, [400, 400]).before(async () => createWidget('dxDataGrid', {
+  dataSource: [{
+    ID: 1,
+    Head_ID: -1,
+    Full_Name: 'John Heart',
+    Prefix: 'Mr.',
+    Title: 'CEO',
+    City: 'Los Angeles',
+    State: 'California',
+    Email: '[email protected]',
+    Skype: 'jheart_DX_skype',
+    Mobile_Phone: '(213) 555-9392',
+    Birth_Date: '1964-03-16',
+    Hire_Date: '1995-01-15',
+  }],
+  keyExpr: 'ID',
+  allowColumnResizing: true,
+  rowDragging: {
+    allowDropInsideItem: true,
+    allowReordering: true,
+  },
+  columns: [
+    {
+      dataField: 'Title',
+      caption: 'Position',
+      hidingPriority: 0,
+      fixed: true,
+    },
+    { dataField: 'Full_Name', hidingPriority: 1 },
+    { dataField: 'City', hidingPriority: 2 },
+    { dataField: 'State', hidingPriority: 3 },
+    { dataField: 'Mobile_Phone', hidingPriority: 4 },
+    { dataField: 'Hire_Date', dataType: 'date', hidingPriority: 5 },
+  ],
+}));

e2e/testcafe-devextreme/tests/treeList/adaptiveRow.ts

@@ -0,0 +1,59 @@
+import TreeList from 'devextreme-testcafe-models/treeList';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { safeSizeTest } from '../../helpers/safeSizeTest';
+
+fixture.disablePageReloads`Adaptive Row`
+  .page(url(__dirname, '../container.html'));
+
+safeSizeTest('Should be shown and hidden when the window is resized', async (t) => {
+  const treeList = new TreeList('#container');
+  await treeList.isReady();
+
+  const adaptiveButton = treeList.getAdaptiveButton();
+  await t.expect(adaptiveButton.exists).ok();
+  await t.click(adaptiveButton);
+
+  await t.expect(treeList.getAdaptiveRow(0).element.exists).ok();
+
+  await t.resizeWindow(1200, 400);
+
+  await t.expect(treeList.isAdaptiveColumnHidden()).ok();
+  await t.expect(treeList.getAdaptiveRow(0).element.exists).notOk();
+}, [400, 400]).before(async () => createWidget('dxTreeList', {
+  dataSource: [{
+    ID: 1,
+    Head_ID: -1,
+    Full_Name: 'John Heart',
+    Prefix: 'Mr.',
+    Title: 'CEO',
+    City: 'Los Angeles',
+    State: 'California',
+    Email: '[email protected]',
+    Skype: 'jheart_DX_skype',
+    Mobile_Phone: '(213) 555-9392',
+    Birth_Date: '1964-03-16',
+    Hire_Date: '1995-01-15',
+  }],
+  keyExpr: 'ID',
+  parentIdExpr: 'Head_ID',
+  rootValue: -1,
+  allowColumnResizing: true,
+  rowDragging: {
+    allowDropInsideItem: true,
+    allowReordering: true,
+  },
+  columns: [
+    {
+      dataField: 'Title',
+      caption: 'Position',
+      hidingPriority: 0,
+      fixed: true,
+    },
+    { dataField: 'Full_Name', hidingPriority: 1 },
+    { dataField: 'City', hidingPriority: 2 },
+    { dataField: 'State', hidingPriority: 3 },
+    { dataField: 'Mobile_Phone', hidingPriority: 4 },
+    { dataField: 'Hire_Date', dataType: 'date', hidingPriority: 5 },
+  ],
+}));

packages/devextreme/js/__internal/grids/grid_core/adaptivity/m_adaptivity.ts

@@ -504,6 +504,28 @@ export class AdaptiveColumnsController extends modules.ViewController {
     }
   }
 
+  public _toggleGroupAdaptiveRowVisibility(isBestFit: boolean) {
+    const hasHiddenColumns = this.hasHiddenColumns() || this.getHidingColumnsQueue().length > 0;
+
+    if (!hasHiddenColumns) {
+      return;
+    }
+
+    const rowsView = this.getView(ROWS_VIEW);
+    const items = this._dataController.items();
+
+    if (!items || items.length === 0) {
+      return;
+    }
+
+    items.forEach((item, index) => {
+      if (item.rowType === ADAPTIVE_ROW_TYPE) {
+        const $row = $(rowsView.getRowElement(index));
+        $row.css('display', isBestFit ? 'none' : '');
+      }
+    });
+  }
+
   private _isCellValid($cell) {
     return $cell && $cell.length && !$cell.hasClass(MASTER_DETAIL_CELL_CLASS) && !$cell.hasClass(GROUP_CELL_CLASS);
   }
@@ -1294,6 +1316,7 @@ const resizing = (Base: ModuleType<ResizingController>) => class AdaptivityResiz
   }
 
   protected _toggleBestFitMode(isBestFit) {
+    this._adaptiveColumnsController._toggleGroupAdaptiveRowVisibility(isBestFit);
     isBestFit && this._adaptiveColumnsController._showHiddenColumns();
     super._toggleBestFitMode(isBestFit);
   }

packages/testcafe-models/dataGrid/index.ts

@@ -43,6 +43,8 @@ export const CLASS = {
   popupEdit: 'edit-popup',
   masterDetailRow: 'dx-master-detail-row',
   adaptiveDetailRow: 'dx-adaptive-detail-row',
+  adaptiveCommandCellHidden: 'dx-command-adaptive-hidden',
+  adaptiveColumnButton: 'dx-datagrid-adaptive-more',
   errorRow: 'dx-error-row',
 
   headerRow: 'dx-header-row',
@@ -417,6 +419,18 @@ export default class DataGrid extends Widget {
     return this.element.find(`.${this.addWidgetPrefix(CLASS.columnChooserButton)}`);
   }
 
+  getAdaptiveButtonSelector(): string {
+    return `.${CLASS.adaptiveColumnButton}`;
+  }
+
+  getAdaptiveButton(nth: number = 0): Selector {
+    return this.element.find(this.getAdaptiveButtonSelector()).nth(nth);
+  }
+
+  isAdaptiveColumnHidden(): Promise<boolean> {
+    return this.element.find(`.${CLASS.adaptiveCommandCellHidden}`).exists;
+  }
+
   apiFilter(filter: any[]): Promise<void> {
     const { getInstance } = this;
 

packages/testcafe-models/treeList/index.ts

@@ -3,6 +3,7 @@ import DataGrid from '../dataGrid';
 
 const CLASS = {
   treeList: 'dx-treelist-container',
+  adaptiveColumnButton: 'dx-treelist-adaptive-more',
 }
 
 export default class TreeList extends DataGrid {
@@ -12,4 +13,8 @@ export default class TreeList extends DataGrid {
   getContainer(): Selector {
     return this.element.find(`.${CLASS.treeList}`);
   }
+
+  getAdaptiveButtonSelector(): string {
+    return `.${CLASS.adaptiveColumnButton}`;
+  }
 }