DataGrid - AI Column: Support width/minWidth (#31107)

Co-authored-by: Alyar <>

Author: Alyar666

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

@@ -8,7 +8,7 @@ fixture`Ai Column.ColumnResizing`
 const DATA_GRID_SELECTOR = '#container';
 
 (['nextColumn', 'widget'] as const).forEach((columnResizingMode) => {
-  test(`Column resizing should work when allowColumnResizing is true and columnResizingMode = ${columnResizingMode}`, async (t) => {
+  test(`Column resizing should work when allowColumnResizing is true (columnResizingMode = ${columnResizingMode})`, async (t) => {
     // arrange
     const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
     const dataCell = dataGrid.getDataCell(0, 0);
@@ -47,7 +47,7 @@ const DATA_GRID_SELECTOR = '#container';
     ],
   }));
 
-  test(`Column resizing should work when allowResizing is true and columnResizingMode = ${columnResizingMode}`, async (t) => {
+  test(`Column resizing should work when allowResizing is true (columnResizingMode = ${columnResizingMode})`, async (t) => {
     // arrange
     const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
     const dataCell = dataGrid.getDataCell(0, 0);
@@ -92,7 +92,7 @@ const DATA_GRID_SELECTOR = '#container';
     ],
   }));
 
-  test(`Column resizing should not work when allowResizing is false and columnResizingMode = ${columnResizingMode}`, async (t) => {
+  test(`Column resizing should not work when allowResizing is false (columnResizingMode = ${columnResizingMode})`, async (t) => {
     // arrange
     const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
     const dataCell = dataGrid.getDataCell(0, 0);
@@ -131,4 +131,44 @@ const DATA_GRID_SELECTOR = '#container';
       { dataField: 'value', caption: 'Value' },
     ],
   }));
+
+  test(`The column width should not be less than its min width when column resizing (columnResizingMode = ${columnResizingMode})`, async (t) => {
+    // arrange
+    const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+    const dataCell = dataGrid.getDataCell(0, 0);
+
+    await t.expect(dataGrid.isReady()).ok();
+
+    // assert
+    await t
+      .expect(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0).element.textContent)
+      .eql('AI Column')
+      .expect(dataCell.element.clientWidth)
+      .eql(100);
+
+    // act
+    await dataGrid.resizeHeader(1, -50);
+
+    // assert
+    await t.expect(dataCell.element.clientWidth).eql(75);
+  }).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,
+    columnResizingMode,
+    columnWidth: 100,
+    columns: [
+      {
+        type: 'ai',
+        caption: 'AI Column',
+        minWidth: 75,
+      },
+      { dataField: 'id', caption: 'ID' },
+      { dataField: 'name', caption: 'Name' },
+      { dataField: 'value', caption: 'Value' },
+    ],
+  }));
 });

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

@@ -0,0 +1,61 @@
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+
+fixture`Ai Column.Common`
+  .page(url(__dirname, '../../../container.html'));
+
+const DATA_GRID_SELECTOR = '#container';
+
+test('The AI column with a given width', async (t) => {
+  // arrange, act
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  // assert
+  await t.expect(dataGrid.getDataCell(0, 3).element.clientWidth).eql(175);
+}).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',
+      width: 175,
+    },
+  ],
+}));
+
+test('The AI column with a given min-width', async (t) => {
+  // arrange, act
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  // assert
+  await t.expect(dataGrid.getDataCell(0, 3).element.clientWidth).eql(175);
+}).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 },
+  ],
+  width: 300,
+  columns: [
+    { dataField: 'id', caption: 'ID' },
+    { dataField: 'name', caption: 'Name' },
+    { dataField: 'value', caption: 'Value', width: 100 },
+    {
+      type: 'ai',
+      caption: 'AI Column',
+      minWidth: 175,
+    },
+  ],
+}));