DataGrid/TreeList AI Column: Add new column type (#31079)

Co-authored-by: Alyar <>

Author: Alyar666

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__default.png

@@ -0,0 +1,39 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+
+fixture`Ai Column.Visual`
+  .page(url(__dirname, '../../../container.html'));
+
+const DATA_GRID_SELECTOR = '#container';
+
+test('Default render', async (t) => {
+  // arrange, act
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('datagrid__ai-column__default.png', dataGrid.element);
+
+  // assert
+  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',
+    },
+  ],
+}));

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/visual.ts

@@ -0,0 +1,51 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import TreeList from 'devextreme-testcafe-models/treeList';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+
+fixture`Ai Column.Visual`
+  .page(url(__dirname, '../../container.html'));
+
+const TREE_LIST_SELECTOR = '#container';
+
+test('Default render', async (t) => {
+  // arrange, act
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const treeList = new TreeList(TREE_LIST_SELECTOR);
+
+  await t.expect(treeList.isReady()).ok();
+
+  await takeScreenshot('treelist__ai-column__default.png', treeList.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxTreeList', {
+  dataSource: [
+    {
+      id: 1, parentId: 0, name: 'Name 1', value: 10,
+    },
+    {
+      id: 2, parentId: 1, name: 'Name 2', value: 20,
+    },
+    {
+      id: 3, parentId: 0, name: 'Name 3', value: 30,
+    },
+    {
+      id: 4, parentId: 3, name: 'Name 4', value: 40,
+    },
+  ],
+  keyExpr: 'id',
+  parentIdExpr: 'parentId',
+  expandedRowKeys: [3],
+  columns: [
+    { dataField: 'id', caption: 'ID' },
+    { dataField: 'name', caption: 'Name' },
+    { dataField: 'value', caption: 'Value' },
+    {
+      type: 'ai',
+      caption: 'AI Column',
+    },
+  ],
+}));

e2e/testcafe-devextreme/tests/treeList/aiColumn/etalons/treelist__ai-column__default.png

@@ -183,7 +183,7 @@ export type ScrollingBase = ComponentScrollingBase;
 export type SelectionBase = ComponentSelectionBase;
 
 /** @public */
-export type DataGridCommandColumnType = 'adaptive' | 'buttons' | 'detailExpand' | 'groupExpand' | 'selection' | 'drag';
+export type DataGridCommandColumnType = 'adaptive' | 'ai' | 'buttons' | 'detailExpand' | 'groupExpand' | 'selection' | 'drag';
 /** @public */
 export type DataGridExportFormat = 'pdf' | 'xlsx';
 /** @public */

e2e/testcafe-devextreme/tests/treeList/aiColumn/visual.ts

@@ -172,7 +172,7 @@ export type TreeListPredefinedColumnButton = 'add' | 'cancel' | 'delete' | 'edit
 /** @public */
 export type TreeListPredefinedToolbarItem = 'addRowButton' | 'applyFilterButton' | 'columnChooserButton' | 'revertButton' | 'saveButton' | 'searchPanel';
 /** @public */
-export type TreeListCommandColumnType = 'adaptive' | 'buttons' | 'drag';
+export type TreeListCommandColumnType = 'adaptive' | 'ai' | 'buttons' | 'drag';
 /** @public */
 export type TreeListFilterMode = 'fullBranch' | 'withAncestors' | 'matchOnly';
 

packages/devextreme/js/ui/data_grid.d.ts

@@ -12349,6 +12349,7 @@ declare module DevExpress.ui {
       DevExpress.common.grids.DataErrorOccurredInfo;
     export type DataGridCommandColumnType =
       | 'adaptive'
+      | 'ai'
       | 'buttons'
       | 'detailExpand'
       | 'groupExpand'
@@ -31401,7 +31402,11 @@ declare module DevExpress.ui {
       TKey = any
     > = DevExpress.common.core.events.EventInfo<dxTreeList<TRowData, TKey>> &
       DevExpress.common.grids.ToolbarPreparingInfo;
-    export type TreeListCommandColumnType = 'adaptive' | 'buttons' | 'drag';
+    export type TreeListCommandColumnType =
+      | 'adaptive'
+      | 'ai'
+      | 'buttons'
+      | 'drag';
     export type TreeListFilterMode =
       | 'fullBranch'
       | 'withAncestors'