Skip to content

Commit 14d091b

Browse files
Alyar666Alyar666
authored
DataGrid - AI Column: Support showInColumnChooser and alignment options (#31180)
Co-authored-by: Alyar <>
1 parent 273976e commit 14d091b

File tree

2 files changed

+181
-0
lines changed

2 files changed

+181
-0
lines changed

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -443,3 +443,91 @@ test('The AI column cannot be shown when columnChooser.mode is "select" and allo
443443
{ dataField: 'value', caption: 'Value' },
444444
],
445445
}));
446+
447+
test('The AI column should not be visible in column chooser when showInColumnChooser is false and columnChooser.mode is "dragAndDrop"', async (t) => {
448+
// arrange
449+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
450+
451+
await t.expect(dataGrid.isReady()).ok();
452+
453+
const headerCells = dataGrid.getHeaders().getHeaderRow(0).getHeaderCells();
454+
455+
// assert
456+
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).notOk();
457+
await checkVisibleHeaders(t, headerCells, ['ID', 'Name', 'Value']);
458+
459+
// act
460+
await dataGrid.apiShowColumnChooser();
461+
462+
// assert
463+
await t.expect(dataGrid.getColumnChooser().isOpened).ok();
464+
await checkChooserColumns(t, dataGrid.getColumnChooser().getColumns(), []);
465+
}).before(async () => createWidget('dxDataGrid', {
466+
dataSource: [
467+
{ id: 1, name: 'Name 1', value: 10 },
468+
{ id: 2, name: 'Name 2', value: 20 },
469+
{ id: 3, name: 'Name 3', value: 30 },
470+
],
471+
width: 600,
472+
columnWidth: 200,
473+
columnChooser: {
474+
enabled: true,
475+
mode: 'dragAndDrop',
476+
},
477+
columns: [
478+
{
479+
type: 'ai',
480+
caption: 'AI Column',
481+
name: 'myAiColumn',
482+
visible: false,
483+
showInColumnChooser: false,
484+
},
485+
{ dataField: 'id', caption: 'ID' },
486+
{ dataField: 'name', caption: 'Name' },
487+
{ dataField: 'value', caption: 'Value' },
488+
],
489+
}));
490+
491+
test('The AI column should not be visible in column chooser when showInColumnChooser is false and columnChooser.mode is "select"', async (t) => {
492+
// arrange
493+
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
494+
495+
await t.expect(dataGrid.isReady()).ok();
496+
497+
const headerCells = dataGrid.getHeaders().getHeaderRow(0).getHeaderCells();
498+
499+
// assert
500+
await t.expect(dataGrid.apiColumnOption('myAiColumn', 'visible')).notOk();
501+
await checkVisibleHeaders(t, headerCells, ['ID', 'Name', 'Value']);
502+
503+
// act
504+
await dataGrid.apiShowColumnChooser();
505+
506+
// assert
507+
await t.expect(dataGrid.getColumnChooser().isOpened).ok();
508+
await checkChooserColumns(t, dataGrid.getColumnChooser().getColumns(), ['ID', 'Name', 'Value']);
509+
}).before(async () => createWidget('dxDataGrid', {
510+
dataSource: [
511+
{ id: 1, name: 'Name 1', value: 10 },
512+
{ id: 2, name: 'Name 2', value: 20 },
513+
{ id: 3, name: 'Name 3', value: 30 },
514+
],
515+
width: 600,
516+
columnWidth: 200,
517+
columnChooser: {
518+
enabled: true,
519+
mode: 'select',
520+
},
521+
columns: [
522+
{
523+
type: 'ai',
524+
caption: 'AI Column',
525+
name: 'myAiColumn',
526+
visible: false,
527+
showInColumnChooser: false,
528+
},
529+
{ dataField: 'id', caption: 'ID' },
530+
{ dataField: 'name', caption: 'Name' },
531+
{ dataField: 'value', caption: 'Value' },
532+
],
533+
}));

‎packages/devextreme/js/__internal/grids/grid_core/ai_column/ai_column.integration.test.ts‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,75 @@ describe('Options', () => {
5454
beforeEach(beforeTest);
5555
afterEach(afterTest);
5656

57+
describe('when alignment is left', () => {
58+
it('should set text-align to the left', async () => {
59+
const { component } = await createDataGrid({
60+
dataSource: [
61+
{ id: 1, name: 'Name 1', value: 10 },
62+
],
63+
columns: [
64+
{ dataField: 'id', caption: 'ID' },
65+
{ dataField: 'name', caption: 'Name' },
66+
{ dataField: 'value', caption: 'Value' },
67+
{
68+
type: 'ai',
69+
caption: 'AI Column',
70+
name: 'myColumn',
71+
alignment: 'left',
72+
},
73+
],
74+
});
75+
76+
expect($(component.getCellElement(0, 3)).css('text-align')).toBe('left');
77+
});
78+
});
79+
80+
describe('when alignment is right', () => {
81+
it('should set text-align to the right', async () => {
82+
const { component } = await createDataGrid({
83+
dataSource: [
84+
{ id: 1, name: 'Name 1', value: 10 },
85+
],
86+
columns: [
87+
{ dataField: 'id', caption: 'ID' },
88+
{ dataField: 'name', caption: 'Name' },
89+
{ dataField: 'value', caption: 'Value' },
90+
{
91+
type: 'ai',
92+
caption: 'AI Column',
93+
name: 'myColumn',
94+
alignment: 'right',
95+
},
96+
],
97+
});
98+
99+
expect($(component.getCellElement(0, 3)).css('text-align')).toBe('right');
100+
});
101+
});
102+
103+
describe('when alignment is center', () => {
104+
it('should set text-align to the center', async () => {
105+
const { component } = await createDataGrid({
106+
dataSource: [
107+
{ id: 1, name: 'Name 1', value: 10 },
108+
],
109+
columns: [
110+
{ dataField: 'id', caption: 'ID' },
111+
{ dataField: 'name', caption: 'Name' },
112+
{ dataField: 'value', caption: 'Value' },
113+
{
114+
type: 'ai',
115+
caption: 'AI Column',
116+
name: 'myColumn',
117+
alignment: 'center',
118+
},
119+
],
120+
});
121+
122+
expect($(component.getCellElement(0, 3)).css('text-align')).toBe('center');
123+
});
124+
});
125+
57126
describe('when the cssClass is set', () => {
58127
it('should have class', async () => {
59128
const { component } = await createDataGrid({
@@ -319,6 +388,30 @@ describe('columnOption', () => {
319388
expect(dataCell.textContent).toBe('Template');
320389
});
321390

391+
it('should apply alignment', async () => {
392+
const { component } = await createDataGrid({
393+
dataSource: [
394+
{ id: 1, name: 'Name 1', value: 10 },
395+
],
396+
columns: [
397+
{ dataField: 'id', caption: 'ID' },
398+
{ dataField: 'name', caption: 'Name' },
399+
{ dataField: 'value', caption: 'Value' },
400+
{
401+
type: 'ai',
402+
caption: 'AI Column',
403+
name: 'myColumn',
404+
},
405+
],
406+
});
407+
408+
expect($(component.getCellElement(0, 3)).css('text-align')).toBe('left');
409+
410+
component.apiColumnOption('myColumn', 'alignment', 'right');
411+
412+
expect($(component.getCellElement(0, 3)).css('text-align')).toBe('right');
413+
});
414+
322415
describe('when the name is reset', () => {
323416
it('should throw E1066', async () => {
324417
const { component } = await createDataGrid({

0 commit comments

Comments
 (0)