Merge branch '25_2' into 25_2_check_angular_21_in_demos

Author: GoodDayForSurf

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-angular/src/ui/scheduler/nested/form.ts

@@ -216,14 +216,6 @@ export class DxoSchedulerFormComponent extends NestedOption implements OnDestroy
         this._setOption('minColWidth', value);
     }
 
-    @Input()
-    get onCanceled(): ((formData: any) => void) {
-        return this._getOption('onCanceled');
-    }
-    set onCanceled(value: ((formData: any) => void)) {
-        this._setOption('onCanceled', value);
-    }
-
     @Input()
     get onContentReady(): ((e: ContentReadyEvent) => void) {
         return this._getOption('onContentReady');
@@ -272,14 +264,6 @@ export class DxoSchedulerFormComponent extends NestedOption implements OnDestroy
         this._setOption('onOptionChanged', value);
     }
 
-    @Input()
-    get onSaved(): ((formData: any) => void) {
-        return this._getOption('onSaved');
-    }
-    set onSaved(value: ((formData: any) => void)) {
-        this._setOption('onSaved', value);
-    }
-
     @Input()
     get onSmartPasted(): ((e: SmartPastedEvent) => void) {
         return this._getOption('onSmartPasted');

packages/devextreme-react/src/scheduler.ts

@@ -498,14 +498,12 @@ type IFormProps = React.PropsWithChildren<{
   labelLocation?: LabelLocation;
   labelMode?: FormLabelMode;
   minColWidth?: number;
-  onCanceled?: ((formData: any) => void);
   onContentReady?: ((e: FormContentReadyEvent) => void);
   onDisposing?: ((e: FormDisposingEvent) => void);
   onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void);
   onFieldDataChanged?: ((e: FieldDataChangedEvent) => void);
   onInitialized?: ((e: FormInitializedEvent) => void);
   onOptionChanged?: ((e: FormOptionChangedEvent) => void);
-  onSaved?: ((formData: any) => void);
   onSmartPasted?: ((e: SmartPastedEvent) => void);
   onSmartPasting?: ((e: SmartPastingEvent) => void);
   optionalMark?: string;

packages/devextreme-vue/src/scheduler.ts

@@ -784,14 +784,12 @@ const DxFormConfig = {
     "update:labelLocation": null,
     "update:labelMode": null,
     "update:minColWidth": null,
-    "update:onCanceled": null,
     "update:onContentReady": null,
     "update:onDisposing": null,
     "update:onEditorEnterKey": null,
     "update:onFieldDataChanged": null,
     "update:onInitialized": null,
     "update:onOptionChanged": null,
-    "update:onSaved": null,
     "update:onSmartPasted": null,
     "update:onSmartPasting": null,
     "update:optionalMark": null,
@@ -832,14 +830,12 @@ const DxFormConfig = {
     labelLocation: String as PropType<LabelLocation>,
     labelMode: String as PropType<FormLabelMode>,
     minColWidth: Number,
-    onCanceled: Function as PropType<((formData: any) => void)>,
     onContentReady: Function as PropType<((e: FormContentReadyEvent) => void)>,
     onDisposing: Function as PropType<((e: FormDisposingEvent) => void)>,
     onEditorEnterKey: Function as PropType<((e: EditorEnterKeyEvent) => void)>,
     onFieldDataChanged: Function as PropType<((e: FieldDataChangedEvent) => void)>,
     onInitialized: Function as PropType<((e: FormInitializedEvent) => void)>,
     onOptionChanged: Function as PropType<((e: FormOptionChangedEvent) => void)>,
-    onSaved: Function as PropType<((formData: any) => void)>,
     onSmartPasted: Function as PropType<((e: SmartPastedEvent) => void)>,
     onSmartPasting: Function as PropType<((e: SmartPastingEvent) => void)>,
     optionalMark: String,

packages/devextreme/js/__internal/grids/data_grid/__tests__/__mock__/model/data_grid.ts

@@ -17,4 +17,23 @@ export class DataGridModel extends GridCoreModel<DataGrid> {
 
     return this.getInstance().getVisibleColumns(headerLevel);
   }
+
+  public setDataGridOptions(options: Record<string, unknown>): void {
+    const instance = this.getInstance();
+
+    Object.entries(options).forEach(([optionName, optionValue]) => {
+      instance.option(optionName, optionValue);
+    });
+  }
+
+  public setDataGridColumnOptions(
+    columnName: string,
+    options: Record<string, unknown>,
+  ): void {
+    const instance = this.getInstance();
+
+    Object.entries(options).forEach(([optionName, optionValue]) => {
+      instance.columnOption(columnName, optionName, optionValue);
+    });
+  }
 }

packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/model/grid_core.ts

@@ -22,6 +22,8 @@ const SELECTORS = {
   toast: 'dx-toast',
   loadPanel: 'dx-loadpanel',
   editForm: 'edit-form',
+  headerCellIndicators: 'dx-column-indicators',
+  headerCellFilter: 'dx-header-filter',
 };
 
 export abstract class GridCoreModel<TInstance extends GridBase = GridBase> {
@@ -48,6 +50,13 @@ export abstract class GridCoreModel<TInstance extends GridBase = GridBase> {
     );
   }
 
+  public getHeaderCellFilter(columnIndex: number): dxElementWrapper {
+    const $headerCell = $(this.getHeaderCells()[columnIndex]);
+    const headerFilterSelector = `.${SELECTORS.headerCellIndicators} > .${SELECTORS.headerCellFilter}`;
+
+    return $headerCell.find(headerFilterSelector);
+  }
+
   public getDataRows(): NodeListOf<HTMLElement> {
     return this.root.querySelectorAll(`.${SELECTORS.dataRowClass}`);
   }

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);