DataGrid - AI Column is empty in the adaptive row (#31909)

Signed-off-by: Dmitry Lavrinovich <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: dmlvr

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

@@ -1,12 +1,30 @@
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { ClientFunction } from 'testcafe';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 
-fixture.disablePageReloads`Ai Column.Adaptivity`
-  .page(url(__dirname, '../../../container.html'));
+fixture`Ai Column.Adaptivity`
+  .page(url(__dirname, './pages/containerWithAIIntegration.html'));
 
 const DATA_GRID_SELECTOR = '#container';
 
+const resolveAIRequest = ClientFunction((): void => {
+  const { aiResponseData } = (window as any);
+  const { aiResolve } = (window as any);
+
+  if (aiResponseData && aiResolve) {
+    aiResolve(aiResponseData);
+
+    (window as any).aiResponseData = null;
+    (window as any).aiResolve = null;
+  }
+});
+
+const deleteGlobalVariables = ClientFunction((): void => {
+  delete (window as any).aiResponseData;
+  delete (window as any).aiResolve;
+});
+
 test('The AI column should be hidden when columnHidingEnabled is true', async (t) => {
   // arrange, act
   const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
@@ -129,3 +147,79 @@ test('The AI column should not be hidden when there is a second AI column with a
     { dataField: 'value', caption: 'Value' },
   ],
 }));
+
+test('The AI column should have value in the adaptive detail row', async (t) => {
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  // act
+  await resolveAIRequest();
+
+  // assert
+  await t.expect(dataGrid.isReady()).ok();
+
+  const adaptiveButton = dataGrid.getAdaptiveButton();
+
+  await t.expect(adaptiveButton.exists).ok();
+
+  await t.click(adaptiveButton);
+
+  const adaptiveRow = dataGrid.getAdaptiveRow(0);
+
+  await t.expect(adaptiveRow.element.exists).ok();
+
+  const aiFormItem = adaptiveRow.getAdaptiveCellByText('AI Column');
+
+  await t.expect(aiFormItem.element.exists).ok();
+
+  await t.expect(aiFormItem.getAdaptiveCellValue()).contains('Response 1');
+}).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 },
+  ],
+  keyExpr: 'id',
+  width: 400,
+  columnHidingEnabled: true,
+  showBorders: true,
+  columns: [
+    {
+      dataField: 'id', caption: 'ID', width: 150, hidingPriority: 3,
+    },
+    {
+      dataField: 'name', caption: 'Name', width: 150, hidingPriority: 2,
+    },
+    {
+      dataField: 'value', caption: 'Value', width: 100, hidingPriority: 1,
+    },
+    {
+      name: 'AIcolumn',
+      caption: 'AI Column',
+      type: 'ai',
+      ai: {
+        prompt: 'Send me nothing',
+        // eslint-disable-next-line new-cap
+        aiIntegration: new (window as any).DevExpress.aiIntegration({
+          sendRequest({ data }) {
+            return {
+              promise: new Promise<string>((resolve) => {
+                const obj = {};
+                Object.entries(data?.data).forEach(([key, value]) => {
+                  obj[key] = `Response ${(value as any).id}`;
+                });
+
+                (window as any).aiResponseData = JSON.stringify(obj);
+                (window as any).aiResolve = resolve;
+              }),
+              abort: (): void => {},
+            };
+          },
+        }),
+      },
+      width: 200,
+      hidingPriority: 0,
+    },
+  ],
+}))).after(async () => {
+  await deleteGlobalVariables();
+});

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

@@ -19,6 +19,7 @@ import { isMaterial } from '@js/ui/themes';
 import type { ResizingController } from '@ts/grids/grid_core/views/m_grid_view';
 
 import type { ExportController } from '../../data_grid/export/m_export';
+import { AI_COLUMN_NAME } from '../ai_column/const';
 import type { Column, ColumnsController } from '../columns_controller/m_columns_controller';
 import type { ColumnsResizerViewController, DraggingHeaderViewController } from '../columns_resizing_reordering/m_columns_resizing_reordering';
 import type { DataController } from '../data_controller/m_data_controller';
@@ -160,6 +161,10 @@ export class AdaptiveColumnsController extends modules.ViewController {
     return ['isAdaptiveDetailRowExpanded', 'expandAdaptiveDetailRow', 'collapseAdaptiveDetailRow'];
   }
 
+  private _getValueFromCellOptions(columnIndex: number, cellOptions: any) {
+    return cellOptions.row.values[columnIndex];
+  }
+
   private _isRowEditMode() {
     const editMode = this._getEditMode();
     return editMode === EDIT_MODE_ROW;
@@ -183,7 +188,12 @@ export class AdaptiveColumnsController extends modules.ViewController {
       }
     });
     const rowData = cellOptions.row.data;
-    const value = column.calculateCellValue(rowData);
+    const columnIndex = that._columnsController.getVisibleIndex(column.index);
+
+    const value = column.type === AI_COLUMN_NAME
+      ? this._getValueFromCellOptions(columnIndex, cellOptions)
+      : column.calculateCellValue(rowData);
+
     const displayValue = gridCoreUtils.getDisplayValue(column, value, rowData, cellOptions.rowType);
     const text = gridCoreUtils.formatValue(displayValue, column);
     const isCellOrBatchEditMode = this._editingController.isCellOrBatchEditMode();
@@ -242,7 +252,7 @@ export class AdaptiveColumnsController extends modules.ViewController {
 
       const renderFormTemplate = function () {
         const isItemEdited = that._isItemEdited(item);
-        templateOptions.value = cellOptions.row.values[columnIndex];
+        templateOptions.value = that._getValueFromCellOptions(columnIndex, cellOptions);
         if (isItemEdited || column.showEditorAlways) {
           editingController.renderFormEditorTemplate(templateOptions, item, options, $container, !isItemEdited);
         } else {
@@ -257,7 +267,7 @@ export class AdaptiveColumnsController extends modules.ViewController {
       if (templateOptions.watch) {
         const dispose = templateOptions.watch(() => ({
           isItemEdited: that._isItemEdited(item),
-          value: cellOptions.row.values[columnIndex],
+          value: that._getValueFromCellOptions(columnIndex, cellOptions),
         }), () => {
           $container.contents().remove();
           $container.removeClass(ADAPTIVE_ITEM_TEXT_CLASS);

packages/testcafe-models/dataGrid/adaptiveDetailRow.ts

@@ -1,6 +1,10 @@
 // eslint-disable-next-line import/no-cycle
 import AdaptiveCell from './data/adaptiveCell';
 
+const SELECTORS = {
+  ADAPTIVE_CELL_CLASS: 'dx-field-item'
+};
+
 export default class AdaptiveDetailRow {
   element: Selector;
 
@@ -11,4 +15,9 @@ export default class AdaptiveDetailRow {
   getAdaptiveCell(index: number): AdaptiveCell {
     return new AdaptiveCell(this.element, index);
   }
+
+  getAdaptiveCellByText(text: string): AdaptiveCell {
+    const cellElement = this.element.find(`.${SELECTORS.ADAPTIVE_CELL_CLASS}`).withText(text);
+    return new AdaptiveCell(cellElement, 0);
+  }
 }

packages/testcafe-models/dataGrid/data/adaptiveCell.ts

@@ -16,4 +16,8 @@ export default class AdaptiveCell extends FocusableElement {
     this.isFocused = this.element.hasClass(CLASS.focused);
     this.isEditCell = this.element.child(`.${CLASS.textBox}`).exists;
   }
+
+  getAdaptiveCellValue(): Promise<string> {
+    return this.element.textContent;
+  }
 }