DataGrid - AI Column: Implement the DropDownButton Menu (#31542)

Co-authored-by: Alyar <>

Author: Alyar666

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/columnResizing.functional.ts

@@ -2,7 +2,7 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 
-fixture.disablePageReloads`Ai Column.ColumnResizing`
+fixture.disablePageReloads`Ai Column.ColumnResizing.Functional`
   .page(url(__dirname, '../../../container.html'));
 
 const DATA_GRID_SELECTOR = '#container';
@@ -40,6 +40,7 @@ const DATA_GRID_SELECTOR = '#container';
       {
         type: 'ai',
         caption: 'AI Column',
+        name: 'myAIColumn',
       },
       { dataField: 'id', caption: 'ID' },
       { dataField: 'name', caption: 'Name' },
@@ -80,6 +81,7 @@ const DATA_GRID_SELECTOR = '#container';
         type: 'ai',
         caption: 'AI Column',
         allowResizing: true,
+        name: 'myAIColumn',
       },
       {
         dataField: 'id',
@@ -124,6 +126,7 @@ const DATA_GRID_SELECTOR = '#container';
       {
         type: 'ai',
         caption: 'AI Column',
+        name: 'myAIColumn',
         allowResizing: false,
       },
       { dataField: 'id', caption: 'ID' },
@@ -165,10 +168,53 @@ const DATA_GRID_SELECTOR = '#container';
         type: 'ai',
         caption: 'AI Column',
         minWidth: 75,
+        name: 'myAIColumn',
       },
       { dataField: 'id', caption: 'ID' },
       { dataField: 'name', caption: 'Name' },
       { dataField: 'value', caption: 'Value' },
     ],
   }));
 });
+
+test('DropDownButton should be hidden during resizing', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const aiDropDownButton = dataGrid
+    .getHeaders()
+    .getHeaderRow(0)
+    .getCommandCell(0)
+    .getAIDropDownButton();
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  // act
+  await t.click(aiDropDownButton.element);
+
+  // assert
+  await t.expect(await aiDropDownButton.isOpened()).ok();
+
+  // act
+  await dataGrid.resizeHeader(1, 50);
+
+  // assert
+  await t.expect(await aiDropDownButton.isOpened()).notOk();
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { id: 1, name: 'Name 1', value: 10 },
+    { id: 2, name: 'Name 2', value: 20 },
+    { id: 3, name: 'Name 3', value: 30 },
+  ],
+  allowColumnResizing: true,
+  columnWidth: 150,
+  columns: [
+    {
+      type: 'ai',
+      caption: 'AI Column',
+      name: 'myAIColumn',
+    },
+    { dataField: 'id', caption: 'ID' },
+    { dataField: 'name', caption: 'Name' },
+    { dataField: 'value', caption: 'Value' },
+  ],
+}));

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=center_rtlEnabled=false).png

@@ -22,13 +22,13 @@ test('Check keyboard navigation for AI column', async (t) => {
   await t.pressKey('tab');
 
   // assert
-  await t.expect(headerRow.getHeaderCell(1).isFocused).ok();
+  await t.expect(headerRow.getCommandCell(1).element.focused).ok();
 
   // act
   await t.pressKey('tab');
 
   // assert
-  await t.expect(headerRow.getHeaderCell(1).getAIDropDownButton().isFocused).ok();
+  await t.expect(headerRow.getCommandCell(1).getAIDropDownButton().isFocused).ok();
 
   await testScreenshot(t, takeScreenshot, 'datagrid__ai-column__focused-dropdown-button.png', { element: dataGrid.element });
 

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=center_rtlEnabled=true).png

@@ -35,6 +35,7 @@ test('Default render', async (t) => {
     {
       type: 'ai',
       caption: 'AI Column',
+      name: 'myAiColumn',
     },
   ],
 }));
@@ -67,6 +68,47 @@ test('Default render', async (t) => {
         {
           type: 'ai',
           caption: 'AI Column',
+          name: 'myAiColumn',
+          alignment,
+        },
+      ],
+      rtlEnabled,
+    }));
+
+    test(`AI Column: DropDownButton Menu - ${alignment} alignment, RTL ${rtlEnabled}`, async (t) => {
+      // arrange
+      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+      const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+      const headerRow = dataGrid.getHeaders().getHeaderRow(0);
+      const aiDropDownButton = headerRow.getCommandCell(3).getAIDropDownButton();
+
+      await t.expect(dataGrid.isReady()).ok();
+
+      // act
+      await t.click(aiDropDownButton.element);
+
+      // assert
+      await t.expect(await aiDropDownButton.isOpened()).ok();
+
+      await takeScreenshot(`datagrid__ai-column_dropdown-button-menu(alignment=${alignment}_rtlEnabled=${rtlEnabled}).png`, dataGrid.element);
+
+      await t
+        .expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    }).before(async () => createWidget('dxDataGrid', {
+      dataSource: [
+        { id: 1, name: 'Name 1', value: 10 },
+        { id: 2, name: 'Name 2', value: 20 },
+        { id: 3, name: 'Name 3', value: 30 },
+      ],
+      columns: [
+        { dataField: 'id', caption: 'ID' },
+        { dataField: 'name', caption: 'Name' },
+        { dataField: 'value', caption: 'Value' },
+        {
+          type: 'ai',
+          caption: 'AI Column',
+          name: 'myAiColumn',
           alignment,
         },
       ],

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=left_rtlEnabled=false).png

@@ -4,6 +4,8 @@ import DataGrid from '@js/ui/data_grid';
 import { GridCoreModel } from '../../../../grid_core/__tests__/__mock__/model/grid_core';
 
 export class DataGridModel extends GridCoreModel<DataGrid> {
+  protected NAME = 'dxDataGrid';
+
   public getInstance(): DataGrid {
     return DataGrid.getInstance(this.root) as DataGrid;
   }