Skip to content

Commit de28d52

Browse files
Alyar666Alyar666
authored
DataGrid - AI Column: Support adaptivity (#31106)
Co-authored-by: Alyar <>
1 parent 1cec22c commit de28d52

File tree

4 files changed

+153
-3
lines changed

4 files changed

+153
-3
lines changed

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

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import DataGrid from 'devextreme-testcafe-models/dataGrid';
2+
import url from '../../../../helpers/getPageUrl';
3+
import { createWidget } from '../../../../helpers/createWidget';
4+
5+
fixture`Ai Column.Adaptivity`
6+
.page(url(__dirname, '../../../container.html'));
7+
8+
const DATA_GRID_SELECTOR = '#container';
9+
10+
test('The AI column should be hidden when columnHidingEnabled is true', async (t) => {
11+
// arrange, act
12+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
13+
14+
await t.expect(dataGrid.isReady()).ok();
15+
16+
const fourthHeaderCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(3);
17+
18+
// assert: the AI column is hidden
19+
await t
20+
.expect(fourthHeaderCell.element.textContent).eql('AI Column')
21+
.expect(fourthHeaderCell.isHidden).ok();
22+
23+
// assert: the adaptive button is visible
24+
await t
25+
.expect(dataGrid.getDataRow(0).getCommandCell(4).getAdaptiveButton().visible).ok();
26+
}).before(async () => createWidget('dxDataGrid', {
27+
dataSource: [
28+
{ id: 1, name: 'Name 1', value: 10 },
29+
{ id: 2, name: 'Name 2', value: 20 },
30+
{ id: 3, name: 'Name 3', value: 30 },
31+
],
32+
width: 350,
33+
columnWidth: 100,
34+
columnHidingEnabled: true,
35+
columns: [
36+
{ dataField: 'id', caption: 'ID' },
37+
{ dataField: 'name', caption: 'Name' },
38+
{ dataField: 'value', caption: 'Value' },
39+
{
40+
type: 'ai',
41+
caption: 'AI Column',
42+
},
43+
],
44+
}));
45+
46+
test('The AI column should be hidden when hidingPriority is set for it', async (t) => {
47+
// arrange, act
48+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
49+
50+
await t.expect(dataGrid.isReady()).ok();
51+
52+
const firstHeaderCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0);
53+
54+
// assert: the AI column is hidden
55+
await t
56+
.expect(firstHeaderCell.element.textContent).eql('AI Column')
57+
.expect(firstHeaderCell.isHidden).ok();
58+
59+
// assert: the adaptive button is visible
60+
await t
61+
.expect(dataGrid.getDataRow(0).getCommandCell(4).getAdaptiveButton().visible).ok();
62+
}).before(async () => createWidget('dxDataGrid', {
63+
dataSource: [
64+
{ id: 1, name: 'Name 1', value: 10 },
65+
{ id: 2, name: 'Name 2', value: 20 },
66+
{ id: 3, name: 'Name 3', value: 30 },
67+
],
68+
width: 350,
69+
columnWidth: 100,
70+
columns: [
71+
{
72+
type: 'ai',
73+
caption: 'AI Column',
74+
hidingPriority: 0,
75+
},
76+
{ dataField: 'id', caption: 'ID' },
77+
{ dataField: 'name', caption: 'Name' },
78+
{ dataField: 'value', caption: 'Value' },
79+
],
80+
}));
81+
82+
test('The AI column should not be hidden when there is a second AI column with a hidingPriority set', async (t) => {
83+
// arrange, act
84+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
85+
86+
await t.expect(dataGrid.isReady()).ok();
87+
88+
const firstHeaderCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0);
89+
const secondHeaderCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(1);
90+
91+
// assert: the first AI column is hidden
92+
await t
93+
.expect(firstHeaderCell.element.textContent).eql('AI Column 1')
94+
.expect(firstHeaderCell.isHidden).ok();
95+
96+
// assert: the second AI column is visible
97+
await t
98+
.expect(secondHeaderCell.element.textContent).eql('AI Column 2')
99+
.expect(secondHeaderCell.isHidden).notOk();
100+
101+
// assert: the adaptive button is visible
102+
await t
103+
.expect(dataGrid.getDataRow(0).getCommandCell(5).getAdaptiveButton().visible).ok();
104+
}).before(async () => createWidget('dxDataGrid', {
105+
dataSource: [
106+
{ id: 1, name: 'Name 1', value: 10 },
107+
{ id: 2, name: 'Name 2', value: 20 },
108+
{ id: 3, name: 'Name 3', value: 30 },
109+
],
110+
width: 350,
111+
columnWidth: 100,
112+
columns: [
113+
{
114+
type: 'ai',
115+
name: 'aiColumn1',
116+
caption: 'AI Column 1',
117+
hidingPriority: 0,
118+
},
119+
{
120+
type: 'ai',
121+
name: 'aiColumn2',
122+
caption: 'AI Column 2',
123+
},
124+
{ dataField: 'id', caption: 'ID' },
125+
{ dataField: 'name', caption: 'Name' },
126+
{ dataField: 'value', caption: 'Value' },
127+
],
128+
}));

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import modules from '../m_modules';
3131
import type { Module, ModuleType } from '../m_types';
3232
import gridCoreUtils from '../m_utils';
3333
import type { RowsView } from '../views/m_rows_view';
34+
import { getHideableColumns } from './utils';
3435

3536
const COLUMN_HEADERS_VIEW = 'columnHeadersView';
3637
const ROWS_VIEW = 'rowsView';
@@ -740,7 +741,7 @@ export class AdaptiveColumnsController extends modules.ViewController {
740741

741742
public updateHidingQueue(columns) {
742743
const that = this;
743-
const hideableColumns = columns.filter((column) => column.visible && !column.type && !column.fixed && !(isDefined(column.groupIndex) && column.groupIndex >= 0));
744+
const hideableColumns = getHideableColumns(columns);
744745
let columnsHasHidingPriority;
745746
let i;
746747

@@ -751,9 +752,11 @@ export class AdaptiveColumnsController extends modules.ViewController {
751752
}
752753

753754
for (i = 0; i < hideableColumns.length; i++) {
754-
if (isDefined(hideableColumns[i].hidingPriority) && hideableColumns[i].hidingPriority >= 0) {
755+
const column = hideableColumns[i];
756+
757+
if (isDefined(column.hidingPriority) && column.hidingPriority >= 0) {
755758
columnsHasHidingPriority = true;
756-
that._hidingColumnsQueue[hideableColumns[i].hidingPriority] = hideableColumns[i];
759+
that._hidingColumnsQueue[column.hidingPriority] = column;
757760
}
758761
}
759762

‎packages/devextreme/js/__internal/grids/grid_core/adaptivity/utils.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { isDefined } from '@js/core/utils/type';
2+
3+
import type { Column } from '../columns_controller/m_columns_controller';
4+
5+
const HIDEABLE_COMMAND_COLUMNS = ['ai'];
6+
7+
function isHideableColumn(column: Column): boolean {
8+
const isGroup = (column?.groupIndex ?? -1) >= 0;
9+
10+
return column.visible === true
11+
&& (!isDefined(column.type) || HIDEABLE_COMMAND_COLUMNS.includes(column.type))
12+
&& !column.fixed
13+
&& !isGroup;
14+
}
15+
16+
export function getHideableColumns(columns: Column[]): Column[] {
17+
return columns.filter(isHideableColumn);
18+
}

‎packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ export interface Column extends ColumnBase {
8888
groupIndex?: number;
8989
type?: string;
9090
visibleWidth?: string | number;
91+
hidingPriority?: number;
9192
}
9293

9394
export class ColumnsController extends modules.Controller {

0 commit comments

Comments
 (0)