Skip to content

Commit 4fa6550

Browse files
committed
Merge branch 'rkaraivanov/column-moving-grid-prop' of https://github.com/IgniteUI/igniteui-angular into rkaraivanov/column-moving-grid-prop
2 parents d380ced + 6e778b4 commit 4fa6550

File tree

44 files changed

+234
-256
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+234
-256
lines changed

projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -122,10 +122,6 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
122122
} else {
123123
this.children.forEach(child => child.hidden = this.hidden);
124124
}
125-
126-
this.children.forEach(child => {
127-
child.movable = false;
128-
});
129125
}
130126

131127
/*

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -427,6 +427,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
427427
/**
428428
* Sets/gets whether the column is movable.
429429
* Default value is `false`.
430+
*
431+
* @deprecated
432+
* Use `IgxGridComponent.moving` instead.
433+
*
430434
* ```typescript
431435
* let isMovable = this.column.movable;
432436
* ```
@@ -436,8 +440,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
436440
*
437441
* @memberof IgxColumnComponent
438442
*/
439-
@WatchColumnChanges()
440-
@notifyChanges()
441443
@Input()
442444
public movable = false;
443445
/**

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export interface GridType extends IGridDataBindable {
3232
renderedRowHeight: number;
3333
summaryPipeTrigger: number;
3434
hasColumnLayouts: boolean;
35+
moving: boolean;
3536

3637
filterMode: FilterMode;
3738

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<igx-excel-style-sorting *ngIf="column?.sortable">
1010
</igx-excel-style-sorting>
1111

12-
<igx-excel-style-moving *ngIf="column?.movable">
12+
<igx-excel-style-moving *ngIf="grid?.moving">
1313
</igx-excel-style-moving>
1414

1515
<igx-excel-style-pinning *ngIf="!column?.disablePinning && displayDensity==='comfortable'">

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
195195
@Input()
196196
public autoGenerate = false;
197197

198+
/**
199+
* Controls whether columns moving is enabled in the grid.
200+
*
201+
*/
202+
@Input()
203+
public moving = false;
204+
198205
/**
199206
* Gets/Sets a custom template when empty.
200207
*
@@ -4920,13 +4927,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
49204927
/**
49214928
* Returns if the `IgxGridComponent` has moveable columns.
49224929
*
4930+
* @deprecated
4931+
* Use `IgxGridComponent.moving` instead.
4932+
*
49234933
* @example
49244934
* ```typescript
49254935
* const movableGrid = this.grid.hasMovableColumns;
49264936
* ```
49274937
*/
49284938
public get hasMovableColumns(): boolean {
4929-
return this.columnList && this.columnList.some((col) => col.movable);
4939+
return this.moving;
49304940
}
49314941

49324942
/**

projects/igniteui-angular/src/lib/grids/grid/column-moving.spec.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@ describe('IgxGrid - Column Moving #grid', () => {
269269

270270

271271
it('Should reorder only movable columns when dropping the ghost image on an interactive area.', (async () => {
272+
pending('Check applicability after moving behavior change');
272273
const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
273274

274275
expect(grid.columns[0].movable).toBeTruthy();

projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1091,8 +1091,6 @@ describe('IgxGrid - Column Selection #grid', () => {
10911091
});
10921092

10931093
it('Moving: Verify that when move a column, it stays selected', () => {
1094-
colProductID.movable = true;
1095-
colProductName.movable = true;
10961094
colProductID.selected = true;
10971095
fix.detectChanges();
10981096

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3058,7 +3058,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
30583058
}));
30593059

30603060
it('Should move column left/right when clicking buttons.', fakeAsync(() => {
3061-
grid.columns[2].movable = true;
3061+
grid.moving = true;
30623062
fix.detectChanges();
30633063

30643064
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
@@ -3099,7 +3099,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
30993099
expect(grid.pinnedColumns.length).toBe(1);
31003100

31013101
const columnToMove = grid.unpinnedColumns[grid.unpinnedColumns.length - 1];
3102-
columnToMove.movable = true;
3102+
grid.moving = true;
31033103

31043104
GridFunctions.clickExcelFilterIconFromCode(fix, grid, columnToMove.field);
31053105

@@ -3557,11 +3557,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
35573557
}));
35583558

35593559
it('Should move pinned column correctly by using move buttons', fakeAsync(() => {
3560+
grid.moving = true;
35603561
const productNameCol = grid.getColumnByName('ProductName');
35613562
const idCol = grid.getColumnByName('ID');
3562-
productNameCol.movable = true;
35633563
productNameCol.pinned = true;
3564-
idCol.movable = true;
35653564
idCol.pinned = true;
35663565
fix.detectChanges();
35673566

@@ -3602,11 +3601,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
36023601
}));
36033602

36043603
it('Should move unpinned column correctly by using move buttons', fakeAsync(() => {
3604+
grid.moving = true;
36053605
const productNameCol = grid.getColumnByName('ProductName');
36063606
const downloadsCol = grid.getColumnByName('Downloads');
3607-
productNameCol.movable = true;
36083607
productNameCol.pinned = true;
3609-
downloadsCol.movable = true;
36103608
fix.detectChanges();
36113609
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ProductName');
36123610
expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 2).innerText).toBe('Downloads');
@@ -3701,7 +3699,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
37013699
it('display density is properly applied on the excel style filtering component', fakeAsync(() => {
37023700
const column = grid.columns.find((c) => c.field === 'ProductName');
37033701
column.sortable = true;
3704-
column.movable = true;
3702+
grid.moving = true;
37053703
fix.detectChanges();
37063704

37073705
// Open excel style filtering component and verify its display density
@@ -3765,7 +3763,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
37653763
it('display density is properly applied on the excel style custom filtering dialog', fakeAsync(() => {
37663764
const column = grid.columns.find((c) => c.field === 'ProductName');
37673765
column.sortable = true;
3768-
column.movable = true;
3766+
grid.moving = true;
37693767
fix.detectChanges();
37703768

37713769
// Open excel style custom filtering dialog and verify its display density
@@ -5572,7 +5570,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
55725570
}));
55735571

55745572
it('Should move column left/right when clicking buttons from template', fakeAsync(() => {
5575-
grid.columns[2].movable = true;
5573+
grid.moving = true;
55765574
fix.detectChanges();
55775575

55785576
GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
@@ -6029,7 +6027,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
60296027
fix.detectChanges();
60306028
// Make 'AnotherField' column movable.
60316029
const column = grid.columns.find((c) => c.field === 'AnotherField');
6032-
column.movable = true;
6030+
grid.moving = true;
60336031
fix.detectChanges();
60346032

60356033
// Pin the 'General Information' group by pinning its child 'ProductName' column.

projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1416,9 +1416,9 @@ describe('IgxGrid - Row Editing #grid', () => {
14161416
}));
14171417

14181418
it(`Moving: Should exit edit mode when moving a column`, () => {
1419+
grid.moving = true;
14191420
const column = grid.columnList.filter(c => c.field === 'ProductName')[0];
14201421
const targetColumn = grid.columnList.filter(c => c.field === 'ProductID')[0];
1421-
column.movable = true;
14221422

14231423
fix.detectChanges();
14241424

projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -580,9 +580,9 @@ describe('IgxGrid - Summaries #grid', () => {
580580
}));
581581

582582
it('Moving: should move summaries when move column', () => {
583+
grid.moving = true;
583584
const colUnitsInStock = grid.getColumnByName('UnitsInStock');
584585
const colProductID = grid.getColumnByName('ProductID');
585-
colUnitsInStock.movable = true;
586586
fix.detectChanges();
587587

588588
grid.moveColumn(colUnitsInStock, colProductID, DropPosition.BeforeDropTarget);

0 commit comments

Comments
 (0)